/* ============================================================
   AORTA AI ASSISTANT WIDGET — STYLES
   Matches the site's navy / teal / gold glassmorphism system.
   Drop this file in the same folder as your other CSS and link:
   <link rel="stylesheet" href="aorta-assistant.css">
   ============================================================ */

:root{
  --aorta-teal: #34D399;
  --aorta-teal-soft: rgba(52,211,153,0.35);
  --aorta-gold: #E8C468;
  --aorta-navy-950: #020818;
  --aorta-navy-900: #050f24;
  --aorta-navy-800: #091632;
  --aorta-navy-700: #0d2247;
  --aorta-glass: rgba(255,255,255,0.06);
  --aorta-glass-strong: rgba(255,255,255,0.09);
  --aorta-border: rgba(255,255,255,0.10);
  --aorta-radius: 20px;
  --aorta-ease: cubic-bezier(0.4,0,0.2,1);
}

#aorta-ai-widget, #aorta-ai-widget *{ box-sizing:border-box; }

#aorta-ai-widget{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99990;
  font-family: 'Outfit', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* ── THOUGHT BUBBLE ───────────────────────────────────────── */
.aorta-bubble{
  position: relative;
  max-width: 210px;
  padding: 11px 16px;
  border-radius: 18px 18px 4px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid var(--aorta-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 24px rgba(52,211,153,0.08);
  color: #eef2ff;
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: aorta-bubble-in 0.6s var(--aorta-ease) 0.4s forwards,
             aorta-bubble-float 4.5s ease-in-out 1.2s infinite;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.aorta-bubble:hover{
  border-color: rgba(52,211,153,0.4);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px rgba(52,211,153,0.18);
}
.aorta-bubble span{ display:block; transition: opacity 0.35s ease; }
.aorta-bubble.aorta-fade span{ opacity: 0; }
.aorta-bubble.aorta-hidden{ display:none; }

@keyframes aorta-bubble-in{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aorta-bubble-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

/* ── FLOATING CHARACTER BUTTON ────────────────────────────── */
.aorta-fab{
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 50% 30%, rgba(52,211,153,0.16), rgba(9,22,50,0.4) 70%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 1px var(--aorta-border), 0 0 34px rgba(52,211,153,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  animation: aorta-float 3.6s ease-in-out infinite;
  transition: transform 0.3s var(--aorta-ease), box-shadow 0.3s ease;
}
.aorta-fab:hover{
  transform: scale(1.06);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 0 1px rgba(52,211,153,0.35), 0 0 46px rgba(52,211,153,0.28);
}
.aorta-fab:active{ transform: scale(0.97); }

@keyframes aorta-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}

.aorta-fab-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform-origin: 50% 85%;
  animation: aorta-breathe 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
  pointer-events: none;
}
@keyframes aorta-breathe{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
}

/* subtle eye-line "blink" flicker overlay — a soft shine sweep standing in for a blink,
   since a true eyelid blink needs a second sprite frame of the character */
.aorta-fab::after{
  content:"";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
  background-size: 220% 220%;
  background-position: 120% 0%;
  opacity: 0;
  pointer-events: none;
  animation: aorta-blink-sweep 5.2s ease-in-out infinite;
}
@keyframes aorta-blink-sweep{
  0%, 92%, 100%{ opacity: 0; background-position: 120% 0%; }
  94%{ opacity: 0.9; background-position: -20% 0%; }
  96%{ opacity: 0; }
}

.aorta-fab-pulse{
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--aorta-teal-soft);
  opacity: 0;
  animation: aorta-pulse-ring 3s ease-out infinite;
}
@keyframes aorta-pulse-ring{
  0%{ opacity: 0.55; transform: scale(0.94); }
  100%{ opacity: 0; transform: scale(1.28); }
}

.aorta-fab-badge{
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--aorta-teal);
  box-shadow: 0 0 0 3px var(--aorta-navy-950);
  display:flex; align-items:center; justify-content:center;
}

/* ── CHAT PANEL ───────────────────────────────────────────── */
.aorta-chat{
  position: absolute;
  right: 0;
  bottom: 100px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 140px);
  border-radius: var(--aorta-radius);
  background: linear-gradient(160deg, rgba(10,22,45,0.72), rgba(4,10,22,0.82));
  border: 1px solid var(--aorta-border);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 60px rgba(52,211,153,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  transform: scale(0.9) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s var(--aorta-ease), opacity 0.3s ease;
}
.aorta-chat.aorta-open{
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.aorta-chat.aorta-minimized{
  height: 66px;
}
.aorta-chat.aorta-minimized .aorta-chat-body,
.aorta-chat.aorta-minimized .aorta-suggestions,
.aorta-chat.aorta-minimized .aorta-chat-input{
  display: none;
}

.aorta-chat-header{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(52,211,153,0.08), rgba(232,196,104,0.05));
  border-bottom: 1px solid var(--aorta-border);
  cursor: pointer;
}
.aorta-chat-header-info{ display:flex; align-items:center; gap: 10px; }
.aorta-chat-avatar{
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; object-position: top center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--aorta-border);
}
.aorta-chat-title{ font-weight: 600; font-size: 0.95rem; color: #f3f6ff; letter-spacing: 0.2px; }
.aorta-chat-status{
  font-size: 0.72rem; color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: 5px; margin-top: 1px;
}
.aorta-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--aorta-teal);
  box-shadow: 0 0 6px var(--aorta-teal);
  animation: aorta-dot-pulse 2s ease-in-out infinite;
}
@keyframes aorta-dot-pulse{ 0%,100%{opacity:1} 50%{opacity:0.35} }

.aorta-chat-controls{ display:flex; gap: 6px; }
.aorta-chat-controls button{
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1;
  display:flex; align-items:center; justify-content:center;
  transition: all 0.2s ease;
}
.aorta-chat-controls button:hover{
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: var(--aorta-border);
}

/* ── MESSAGES ─────────────────────────────────────────────── */
.aorta-chat-body{
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.aorta-chat-body::-webkit-scrollbar{ width: 5px; }
.aorta-chat-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 6px; }

.aorta-msg{
  max-width: 84%;
  padding: 10px 13px;
  font-size: 0.88rem;
  line-height: 1.5;
  border-radius: 14px;
  animation: aorta-msg-in 0.3s var(--aorta-ease);
  word-wrap: break-word;
}
@keyframes aorta-msg-in{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
.aorta-msg.bot{
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--aorta-border);
  color: #e9edf7;
  border-bottom-left-radius: 4px;
}
.aorta-msg.user{
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(52,211,153,0.28), rgba(52,211,153,0.14));
  border: 1px solid rgba(52,211,153,0.3);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.aorta-msg-row{ display:flex; flex-direction:column; }
.aorta-msg-row.bot{ align-items:flex-start; }
.aorta-msg-row.user{ align-items:flex-end; }

/* follow-up chips attached to a bot message */
.aorta-followups{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; max-width: 92%;
}
.aorta-chip{
  font-size: 0.75rem;
  padding: 6px 11px;
  border-radius: 20px;
  border: 1px solid rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.07);
  color: #d9fbe9;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.aorta-chip:hover{
  background: rgba(52,211,153,0.18);
  border-color: rgba(52,211,153,0.55);
  transform: translateY(-1px);
}

/* thinking / typing indicator */
.aorta-typing{
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--aorta-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.aorta-typing span{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.65);
  animation: aorta-typing-bounce 1.2s infinite ease-in-out;
}
.aorta-typing span:nth-child(2){ animation-delay: 0.15s; }
.aorta-typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes aorta-typing-bounce{
  0%,60%,100%{ transform: translateY(0); opacity:0.5; }
  30%{ transform: translateY(-5px); opacity:1; }
}

/* ── SUGGESTIONS (initial) ───────────────────────────────── */
.aorta-suggestions{
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 12px;
}
.aorta-suggestions .aorta-chip{ background: rgba(232,196,104,0.08); border-color: rgba(232,196,104,0.3); color: #f7ecd0; }
.aorta-suggestions .aorta-chip:hover{ background: rgba(232,196,104,0.18); border-color: rgba(232,196,104,0.55); }

/* ── INPUT ────────────────────────────────────────────────── */
.aorta-chat-input{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--aorta-border);
  background: rgba(255,255,255,0.02);
}
.aorta-chat-input input{
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--aorta-border);
  border-radius: 12px;
  padding: 10px 13px;
  font-size: 0.86rem;
  color: #fff;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.aorta-chat-input input::placeholder{ color: rgba(255,255,255,0.4); }
.aorta-chat-input input:focus{ border-color: rgba(52,211,153,0.5); background: rgba(255,255,255,0.08); }

.aorta-chat-input button{
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  border: none;
  background: linear-gradient(135deg, #34D399, #10B981);
  color: #04150d;
  font-size: 1rem;
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(52,211,153,0.35);
}
.aorta-chat-input button:hover{ transform: translateY(-1px) scale(1.04); box-shadow: 0 6px 18px rgba(52,211,153,0.5); }
.aorta-chat-input button:active{ transform: scale(0.94); }

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 480px){
  #aorta-ai-widget{ right: 14px; bottom: 14px; }
  .aorta-fab{ width: 70px; height: 70px; }
  .aorta-chat{
    width: calc(100vw - 24px);
    height: calc(100vh - 120px);
    bottom: 86px;
    right: -8px;
  }
  .aorta-bubble{ max-width: 170px; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce){
  .aorta-fab, .aorta-fab-img, .aorta-bubble, .aorta-fab-pulse, .aorta-fab::after{
    animation: none !important;
  }
}