/* Microbeat chat widget
 *
 * The panel is deliberately large so it reads as a studio window rather than a
 * cramped popup, but every size below is a normal, readable text scale - no
 * display type. #aimeta-btn is the launcher that toggles the panel and is left
 * exactly as it was; it is the one control that must never disappear.
 */
#aimeta-widget { position: fixed; bottom: 22px; right: 22px; z-index: 9999; font-family: 'Segoe UI', Arial, sans-serif; }
#aimeta-btn { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #b26bff, #7c4dff); border: 0; cursor: pointer; box-shadow: 0 8px 28px rgba(124, 77, 255, .45); font-size: 26px; color: #fff; transition: transform .15s; }
#aimeta-btn:hover { transform: scale(1.06); }
#aimeta-panel { display: none; position: absolute; bottom: 74px; right: 0; width: min(480px, calc(100vw - 44px)); max-height: min(640px, calc(100vh - 120px)); max-height: min(640px, calc(100dvh - 120px)); background: #15102a; border: 1px solid #2c2350; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); flex-direction: column; }
#aimeta-panel.open { display: flex; }
#aimeta-head { padding: 14px 16px; background: #0e0a20; border-bottom: 1px solid #2c2350; display: flex; align-items: center; gap: 12px; }
#aimeta-head img { width: 40px; height: 40px; border-radius: 50%; }
#aimeta-head b { font-size: 17px; color: #eee; }
#aimeta-head > div { flex: 1 1 auto; min-width: 0; }
#aimeta-head span { font-size: 13px; color: #25D366; display: block; margin-top: 1px; }
#aimeta-close { margin-left: auto; background: none; border: 0; color: #8f84ad; font-size: 18px; cursor: pointer; padding: 4px 6px; }
/* Let the transcript fill the panel. The panel's own max-height caps the growth,
   so a short chat is a comfortable size and a long one scrolls. */
#aimeta-body { flex: 1; overflow-y: auto; padding: 16px; min-height: min(360px, 42vh); }
.aimeta-msg { margin-bottom: 12px; font-size: 15px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.aimeta-msg.bot { background: #0e0a20; border: 1px solid #2c2350; color: #d9d2ef; padding: 11px 14px; border-radius: 12px; border-top-left-radius: 2px; }
.aimeta-msg.user { text-align: right; color: #b26bff; font-weight: 600; }
#aimeta-input { display: flex; gap: 10px; padding: 12px; border-top: 1px solid #2c2350; background: #0e0a20; }
#aimeta-input input { flex: 1; padding: 11px 13px; background: #15102a; border: 1px solid #342a5c; border-radius: 8px; color: #eee; font-size: 16px; }
#aimeta-input button { padding: 11px 18px; background: linear-gradient(90deg, #25D366, #128C7E); border: 0; border-radius: 8px; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
#aimeta-input button:disabled { opacity: .55; cursor: default; }

/* "An answer is coming." Three signals while a reply is in flight: bouncing
   dots in the answer's own bubble, a floating typing badge beside the launcher
   (visible even with the panel shut), and a pulse on the launcher itself. */
.aimeta-msg.typing { display: inline-flex; align-items: center; gap: 5px; }
.aimeta-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #b26bff; animation: aimeta-bounce 1.1s infinite ease-in-out; }
.aimeta-msg.typing i:nth-child(2) { animation-delay: .16s; }
.aimeta-msg.typing i:nth-child(3) { animation-delay: .32s; }
#aimeta-pill { position: absolute; bottom: 15px; right: 74px; display: none; align-items: center; gap: 5px; padding: 8px 13px; border-radius: 30px; background: #15102a; border: 1px solid #2c2350; color: #b9aed6; font-size: 13px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
#aimeta-widget.busy #aimeta-pill { display: flex; }
#aimeta-pill i { width: 5px; height: 5px; border-radius: 50%; background: #b26bff; animation: aimeta-bounce 1.1s infinite ease-in-out; }
#aimeta-pill i:nth-child(3) { animation-delay: .16s; }
#aimeta-pill i:nth-child(4) { animation-delay: .32s; }
#aimeta-widget.busy #aimeta-btn { animation: aimeta-pulse 1.4s infinite; }
@keyframes aimeta-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes aimeta-pulse { 0%, 100% { box-shadow: 0 8px 28px rgba(124,77,255,.45); } 50% { box-shadow: 0 0 0 10px rgba(178,107,255,.16), 0 8px 28px rgba(124,77,255,.45); } }

/* ── phones ──────────────────────────────────────────────────────────────
   The panel already clamps to 100vw-44px, but three things still hurt on a
   small screen: dvh, so mobile browser chrome cannot eat the input row; a
   body minimum in vh rather than a fixed 360px, so a short phone does not
   push the send button out of the panel's own cap; and a shorter inset so
   the launcher is not half off the edge. The 16px field is for iOS, which
   zooms the whole page when a focused input is smaller than that. */
@media (max-width: 480px) {
  #aimeta-widget { bottom: 14px; right: 14px; }
  /* Viewport-anchored rather than widget-anchored. A width in vw counts a
     classic 15px scrollbar, so `100vw - 28px` came out 15px wider than the
     layout box and pushed the panel's left edge 1px off-screen. left/right on
     a fixed box are measured against the viewport itself, so the gutter stays
     symmetric on every device - overlay-scrollbar phones included. */
  #aimeta-panel { position: fixed; left: 14px; right: 14px; width: auto; bottom: 88px; max-height: calc(100dvh - 110px); }
  #aimeta-body { min-height: 0; }
  #aimeta-input input { font-size: 16px; }
}