/* AriaOne chat widget — recolor a canon OPIFEX (OPI-7469, gate APEX bloqueante 3).
   Tokens vía opifex-canon.md §3 (dark-mode canónico, gold+cyan, sin violeta ni blanco puro). */
:root {
  --aria-bg-void:     #0B0F18;
  --aria-bg-base:     #131826;
  --aria-bg-surface:  #1B2235;
  --aria-border:      #2A334A;
  --aria-text-primary:   #F0F2F8;
  --aria-text-secondary: #8A94AD;
  --aria-gold:        #D4A34A;
  --aria-gold-hover:  #E5B45A;
  --aria-cyan:        #6BB8E0;
  --aria-cyan-hover:  #8ACCE5;
}

#aria-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Inter', sans-serif;
}

#aria-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aria-gold);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(212,163,74,.45);
  transition: transform .2s, box-shadow .2s;
  margin-left: auto;
}
#aria-btn:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(212,163,74,.55); }
#aria-btn svg { width: 28px; height: 28px; fill: var(--aria-bg-void); }

#aria-bubble {
  display: none;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 48px);
  height: 480px;
  max-height: calc(100vh - 100px);
  background: var(--aria-bg-surface);
  border: 1px solid var(--aria-border);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
  overflow: hidden;
  margin-bottom: 12px;
  animation: aria-pop .2s ease;
}
#aria-bubble.open { display: flex; }
@keyframes aria-pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }

#aria-header {
  background: var(--aria-bg-void);
  color: var(--aria-text-primary);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--aria-border);
}
#aria-header img { width: 36px; height: 36px; border-radius: 50%; background: rgba(212,163,74,.15); }
#aria-header-text { flex: 1; }
#aria-header-text strong { display: block; font-size: .95rem; color: var(--aria-gold); }
#aria-header-text span { font-size: .78rem; color: var(--aria-text-secondary); }
#aria-close { background: none; border: none; color: var(--aria-text-primary); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 2px; opacity: .75; }
#aria-close:hover { opacity: 1; }

#aria-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--aria-bg-base);
}

.aria-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .88rem;
  line-height: 1.5;
  word-break: break-word;
}
.aria-msg.bot {
  background: var(--aria-bg-surface);
  color: var(--aria-text-primary);
  border: 1px solid var(--aria-border);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.aria-msg.user {
  background: var(--aria-cyan);
  color: var(--aria-bg-void);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

#aria-typing {
  display: none;
  align-self: flex-start;
  background: var(--aria-bg-surface);
  border: 1px solid var(--aria-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
}
#aria-typing span {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--aria-text-secondary);
  border-radius: 50%;
  animation: aria-dot 1.2s infinite;
}
#aria-typing span:nth-child(2) { animation-delay: .2s; }
#aria-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes aria-dot { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1.1);opacity:1} }

#aria-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--aria-border);
  background: var(--aria-bg-void);
  flex-shrink: 0;
}
#aria-input {
  flex: 1;
  border: 1px solid var(--aria-border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .88rem;
  outline: none;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  max-height: 80px;
  background: var(--aria-bg-surface);
  color: var(--aria-text-primary);
}
#aria-input::placeholder { color: var(--aria-text-secondary); }
#aria-input:focus { border-color: var(--aria-cyan); outline: 2px solid var(--aria-cyan); outline-offset: 1px; }
#aria-send {
  background: var(--aria-gold);
  border: none;
  border-radius: 8px;
  color: var(--aria-bg-void);
  padding: 9px 14px;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s;
  flex-shrink: 0;
}
#aria-send:hover { background: var(--aria-gold-hover); }
#aria-send:disabled { background: var(--aria-border); color: var(--aria-text-secondary); cursor: not-allowed; }

@media (max-width: 480px) {
  #aria-widget { bottom: 16px; right: 16px; }
  #aria-bubble { width: calc(100vw - 32px); height: 420px; }
}