/* Awwee Notify Banner — O5-C (locked)
   Fonts expected on page: DM Sans (body), Space Grotesk (button).
   Place .awwee-notify directly ABOVE the chat composer. Transparent bg — works on any surface.
   Light mode: add .an-light on .awwee-notify (or scope via your theme class). */
:root{--an-blue1:#3a55f5;--an-blue2:#2036c9;--an-green:#7CEFAA;--an-green-light:#1fae62}
@keyframes an-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes an-ring{0%{transform:scale(.5);opacity:1}70%,100%{transform:scale(1.4);opacity:0}}
@keyframes an-sheen{0%,72%{left:-60%}88%,100%{left:130%}}
@keyframes an-drop{from{opacity:1}to{opacity:0;transform:translateY(10px)}}
.awwee-notify{display:flex;align-items:center;gap:10px;padding:9px 8px 9px 14px;margin:0 12px 8px;border-radius:999px;background:transparent;animation:an-rise .45s cubic-bezier(.22,1,.36,1) both;font-family:'DM Sans',sans-serif}
.awwee-notify.an-hide{animation:an-drop .3s ease both}
.an-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--an-green);box-shadow:0 0 8px rgba(124,239,170,.7);position:relative}
.an-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(124,239,170,.5);animation:an-ring 2s ease-out infinite}
.an-text{flex:1;font:500 12.5px/1.35 'DM Sans',sans-serif;color:#c6cce2;letter-spacing:.01em}
.an-text b{color:#fff;font-weight:700}
.an-btn{flex:none;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--an-blue1),var(--an-blue2));color:#fff;font:700 12px 'Space Grotesk',sans-serif;letter-spacing:.06em;border:0;border-radius:999px;padding:9px 17px;box-shadow:0 4px 14px rgba(39,67,238,.4),inset 0 1px 0 rgba(255,255,255,.25);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.an-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(39,67,238,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.an-btn:active{transform:translateY(0) scale(.97)}
.an-btn::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:an-sheen 3.6s ease-in-out infinite}
.an-close{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:0;background:none;color:#6d7590;font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.an-close:hover{background:rgba(255,255,255,.08);color:#aeb5d2}
/* light mode */
.an-light .an-text{color:#3b425f}
.an-light .an-text b{color:#171e3c}
.an-light .an-dot{background:var(--an-green-light);box-shadow:0 0 8px rgba(31,174,98,.5)}
.an-light .an-dot::after{border-color:rgba(31,174,98,.45)}
.an-light .an-close{color:#8a90a8}
.an-light .an-close:hover{background:rgba(23,30,60,.07);color:#5a6180}
/* Design B — confirmation (shown once after Allow, auto-fades) */
.awwee-confirm{display:flex;align-items:center;gap:10px;padding:9px 14px;margin:0 12px 8px;border-radius:999px;background:rgba(124,239,170,.08);border:1px solid rgba(124,239,170,.28);animation:an-rise .45s cubic-bezier(.22,1,.36,1) both;font-family:'DM Sans',sans-serif}
.awwee-confirm.an-hide{animation:an-drop .3s ease both}
.an-check{width:18px;height:18px;flex:none;border-radius:50%;background:var(--an-green);color:#0a2416;display:grid;place-items:center;font:800 10px 'Space Grotesk',sans-serif}
.an-ctext{flex:1;min-width:0;font:500 12.5px/1.35 'DM Sans',sans-serif;color:#c6cce2}
.an-ctext b{color:#fff;font-weight:700}
.an-light.awwee-confirm{background:rgba(31,174,98,.08);border-color:rgba(31,174,98,.3)}
.an-light .an-check{background:var(--an-green-light);color:#fff}
.an-light .an-ctext{color:#3b425f}
.an-light .an-ctext b{color:#171e3c}
/* Responsive — 360px and below: tighten; 320px still one line */
.an-text{min-width:0}
@media (max-width:400px){.awwee-notify{padding:8px 6px 8px 12px;gap:8px}.an-text,.an-ctext{font-size:11.5px}.an-btn{padding:8px 13px;font-size:11px}}
@media (max-width:340px){.an-text,.an-ctext{font-size:11px}.an-btn{padding:8px 11px}}
/* Tablet / desktop — cap width, center above composer */
@media (min-width:700px){.awwee-notify,.awwee-confirm{max-width:560px;margin-left:auto;margin-right:auto;width:calc(100% - 24px)}}