/* ─────────────────────────────────────────────────────────
   Aria Chat Widget — Prestige by Synergy Lux
   ───────────────────────────────────────────────────────── */

:root {
  --aria-gold:        #C9A84C;
  --aria-gold-dim:    rgba(201,168,76,0.18);
  --aria-gold-border: rgba(201,168,76,0.28);
  --aria-black:       #06060A;
  --aria-card:        #0F0F14;
  --aria-surface:     #141419;
  --aria-muted:       #9191A0;
  --aria-white:       #EFEFEF;
  --aria-radius:      20px;
  --aria-w:           380px;
  --aria-h:           520px;
}

/* ── Launcher button ──────────────────────────────────── */

#aria-launcher {
  position:        fixed;
  bottom:          28px;
  right:           28px;
  z-index:         9998;
  display:         flex;
  align-items:     center;
  gap:             9px;
  padding:         11px 20px 11px 16px;
  border-radius:   100px;
  border:          1px solid var(--aria-gold-border);
  background:      var(--aria-card);
  cursor:          pointer;
  box-shadow:      0 4px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,168,76,0.06);
  transition:      transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
}

#aria-launcher:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 24px rgba(201,168,76,0.12);
}

#aria-launcher:active { transform: scale(0.97); }

#aria-launcher.aria-open { opacity: 0; pointer-events: none; }

.aria-launcher-dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    var(--aria-gold);
  flex-shrink:   0;
  animation:     aria-pulse 2.2s ease-in-out infinite;
}

@keyframes aria-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(201,168,76,0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(201,168,76,0);   }
}

.aria-launcher-label {
  font-family:    'Cormorant Garamond', 'Georgia', serif;
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.04em;
  color:          var(--aria-gold);
  white-space:    nowrap;
}

/* ── Chat window ──────────────────────────────────────── */

#aria-window {
  position:      fixed;
  bottom:        28px;
  right:         28px;
  z-index:       9999;
  width:         var(--aria-w);
  height:        var(--aria-h);
  border-radius: var(--aria-radius);
  border:        1px solid var(--aria-gold-border);
  background:    var(--aria-card);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  box-shadow:    0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,168,76,0.06), 0 0 60px rgba(201,168,76,0.04);

  /* entrance animation */
  opacity:         0;
  transform:       translateY(16px) scale(0.97);
  pointer-events:  none;
  transition:      opacity 0.28s cubic-bezier(0.22,1,0.36,1),
                   transform 0.28s cubic-bezier(0.22,1,0.36,1);
}

#aria-window.aria-open {
  opacity:        1;
  transform:      translateY(0) scale(1);
  pointer-events: all;
}

/* top glow line */
#aria-window::before {
  content:    '';
  position:   absolute;
  top:        0; left: 10%; right: 10%;
  height:     1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,0.35), transparent);
}

/* ── Header ───────────────────────────────────────────── */

#aria-header {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 18px 14px;
  border-bottom:   1px solid rgba(201,168,76,0.10);
  background:      linear-gradient(to bottom, rgba(201,168,76,0.04), transparent);
}

.aria-header-left {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.aria-avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    radial-gradient(circle at 35% 35%, rgba(201,168,76,0.25), rgba(201,168,76,0.06));
  border:        1px solid rgba(201,168,76,0.30);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     13px;
  color:         var(--aria-gold);
  flex-shrink:   0;
}

.aria-header-name {
  font-family:    'Cormorant Garamond', 'Georgia', serif;
  font-size:      16px;
  font-weight:    600;
  color:          var(--aria-white);
  line-height:    1;
  letter-spacing: 0.01em;
}

.aria-header-sub {
  font-size:      10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color:          var(--aria-gold);
  opacity:        0.55;
  margin-top:     3px;
}

#aria-close {
  width:          30px;
  height:         30px;
  border-radius:  50%;
  border:         1px solid rgba(201,168,76,0.15);
  background:     transparent;
  color:          var(--aria-muted);
  font-size:      14px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     color 0.2s, border-color 0.2s;
  flex-shrink:    0;
}

#aria-close:hover { color: var(--aria-white); border-color: rgba(201,168,76,0.35); }

/* ── Messages ─────────────────────────────────────────── */

#aria-messages {
  flex:          1;
  overflow-y:    auto;
  padding:       18px 16px;
  display:       flex;
  flex-direction: column;
  gap:           12px;
  scroll-behavior: smooth;
}

#aria-messages::-webkit-scrollbar { width: 4px; }
#aria-messages::-webkit-scrollbar-track { background: transparent; }
#aria-messages::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.15); border-radius: 4px; }

.aria-msg {
  max-width:     88%;
  line-height:   1.55;
  font-size:     13.5px;
  animation:     aria-msg-in 0.22s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes aria-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Aria (assistant) bubble */
.aria-msg.aria-assistant {
  align-self:    flex-start;
  background:    var(--aria-surface);
  border:        1px solid rgba(201,168,76,0.12);
  border-radius: 4px 16px 16px 16px;
  padding:       11px 14px;
  color:         var(--aria-white);
}

/* User bubble */
.aria-msg.aria-user {
  align-self:    flex-end;
  background:    var(--aria-gold-dim);
  border:        1px solid var(--aria-gold-border);
  border-radius: 16px 4px 16px 16px;
  padding:       11px 14px;
  color:         var(--aria-white);
}

/* Typing indicator */
.aria-typing {
  align-self:    flex-start;
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       12px 16px;
  background:    var(--aria-surface);
  border:        1px solid rgba(201,168,76,0.12);
  border-radius: 4px 16px 16px 16px;
}

.aria-typing span {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--aria-gold);
  opacity:       0.4;
  animation:     aria-dot 1.2s ease-in-out infinite;
}

.aria-typing span:nth-child(2) { animation-delay: 0.2s; }
.aria-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aria-dot {
  0%,60%,100% { opacity: 0.25; transform: scale(0.85); }
  30%          { opacity: 1;    transform: scale(1.15); }
}

/* Confirmation card */
.aria-confirm-card {
  align-self:    flex-start;
  width:         100%;
  max-width:     100%;
  background:    linear-gradient(135deg, rgba(201,168,76,0.08), rgba(201,168,76,0.03));
  border:        1px solid rgba(201,168,76,0.30);
  border-radius: 14px;
  padding:       16px;
  color:         var(--aria-white);
}

.aria-confirm-card h4 {
  font-family:    'Cormorant Garamond', 'Georgia', serif;
  font-size:      16px;
  font-weight:    600;
  color:          var(--aria-gold);
  margin:         0 0 10px;
  letter-spacing: 0.02em;
}

.aria-confirm-card p {
  font-size:   12px;
  color:       var(--aria-muted);
  margin:      4px 0;
  line-height: 1.4;
}

.aria-confirm-card strong { color: var(--aria-white); font-weight: 500; }

.aria-confirm-actions {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     14px;
}

.aria-btn-confirm {
  width:          100%;
  padding:        12px;
  border-radius:  10px;
  border:         none;
  background:     linear-gradient(135deg, #D4AF5A, #C9A84C, #B8932E);
  color:          #06060A;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     opacity 0.2s;
}

.aria-btn-confirm:hover    { opacity: 0.88; }
.aria-btn-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

.aria-btn-edit {
  width:          100%;
  padding:        11px;
  border-radius:  10px;
  border:         1px solid rgba(201,168,76,0.22);
  background:     transparent;
  color:          rgba(201,168,76,0.70);
  font-size:      11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     border-color 0.2s, color 0.2s;
}

.aria-btn-edit:hover    { border-color: rgba(201,168,76,0.45); color: var(--aria-gold); }
.aria-btn-edit:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Input area ───────────────────────────────────────── */

#aria-input-area {
  flex-shrink:   0;
  padding:       12px 14px 16px;
  border-top:    1px solid rgba(201,168,76,0.10);
  background:    rgba(6,6,10,0.6);
  display:       flex;
  align-items:   flex-end;
  gap:           10px;
}

#aria-input {
  flex:          1;
  min-height:    40px;
  max-height:    120px;
  padding:       10px 14px;
  border-radius: 14px;
  border:        1px solid rgba(201,168,76,0.18);
  background:    var(--aria-surface);
  color:         var(--aria-white);
  font-size:     13.5px;
  font-family:   inherit;
  resize:        none;
  outline:       none;
  line-height:   1.45;
  transition:    border-color 0.2s;
  scrollbar-width: none;
}

#aria-input::-webkit-scrollbar { display: none; }
#aria-input::placeholder { color: rgba(145,145,160,0.45); }
#aria-input:focus { border-color: rgba(201,168,76,0.38); }

#aria-send {
  width:          40px;
  height:         40px;
  border-radius:  12px;
  border:         none;
  background:     var(--aria-gold);
  color:          #06060A;
  font-size:      16px;
  cursor:         pointer;
  flex-shrink:    0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background 0.2s, transform 0.15s;
}

#aria-send:hover   { background: #d4b45a; }
#aria-send:active  { transform: scale(0.93); }
#aria-send:disabled {
  background: rgba(201,168,76,0.25);
  cursor:     not-allowed;
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --aria-w: 100vw;
    --aria-h: 100dvh;
  }

  #aria-window {
    bottom:        0;
    right:         0;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }

  #aria-launcher {
    bottom: 20px;
    right:  20px;
  }
}