/* ============================================================
   TEMA v2 · 80 · ASISTENTE IA  ·  tecnológico
   Azul profundo y violeta sobre grafito azulado, con brillos suaves.
   El chat (panel flotante de escritorio y página de celular) es el
   mismo asistente; solo cambia cómo se ve.
   ============================================================ */
.ia-top-btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: linear-gradient(120deg, #3b2f95, #6a4fe0); color: #fff; box-shadow: 0 6px 16px rgba(91, 75, 196, .4); font-weight: 750; letter-spacing: .02em; }
.ia-top-btn:hover, .ia-top-btn.on { background: linear-gradient(120deg, #4a3cb5, #7d62ff); border-color: transparent; }
.ia-panel { border-radius: 26px; box-shadow: 0 24px 60px rgba(14, 10, 60, .5), 0 0 0 1px rgba(139, 120, 255, .35); }

.ia-chat { border-radius: 26px; border: 1px solid #2a2e5a; background: radial-gradient(520px 260px at 100% 0%, rgba(106, 79, 224, .22), transparent 70%), #0e0f22; color: #e8e8fb; --text: #e8e8fb; --text-muted: #9a9ccd; --text-soft: #6f72a8; }
.ia-head { padding: 16px 16px 16px 18px; border-bottom: 1px solid #23265a; background: linear-gradient(120deg, #1a1d4a, #2b2170); }
.ia-head-ico { width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .14); color: #d8d0ff; box-shadow: 0 0 18px rgba(169, 155, 255, .45); }
.ia-head-txt b { font-family: var(--font-num); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ia-head-txt small { color: #b5b0f0; }
.ia-head .icon-btn { color: #d8d0ff; background: transparent; }
.ia-head .icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ia-msgs { background: transparent; padding: 18px; gap: 12px; }
.ia-msg { border-radius: 18px; padding: 12px 16px; font-size: 14.5px; line-height: 1.5; }
.ia-user { background: linear-gradient(135deg, #5b4bc4, #7d62ff); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 8px 22px rgba(91, 75, 196, .4); }
.ia-bot { background: rgba(255, 255, 255, .06); border: 1px solid rgba(139, 120, 255, .28); color: #e8e8fb; border-bottom-left-radius: 6px; backdrop-filter: blur(6px); }
.ia-error { background: rgba(238, 86, 84, .12); color: #ff9a98; border-color: rgba(238, 86, 84, .4); }
.ia-retry { display: block; margin-top: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 154, 152, .55); background: transparent; color: #ffb9b7; font: inherit; font-weight: 700; cursor: pointer; }
.ia-retry:hover { background: rgba(238, 86, 84, .2); color: #fff; }
.ia-welcome p { color: #9a9ccd; }
.ia-chip { border-radius: 999px; border: 1px solid #3a3f78; background: rgba(139, 120, 255, .1); color: #d3ccff; font-weight: 600; padding: 9px 15px; transition: background .14s, border-color .14s, transform .08s; }
.ia-chip:hover { background: rgba(139, 120, 255, .26); border-color: #a99bff; color: #fff; }
.ia-chip:active { transform: scale(.97); }
.ia-typing i { background: #a99bff; box-shadow: 0 0 8px rgba(169, 155, 255, .8); }
.ia-form { background: rgba(10, 11, 30, .6); border-top: 1px solid #23265a; padding: 14px; gap: 10px; align-items: center; }
.ia-form textarea { background: #15172e; border: 1.5px solid #3a3f78; border-radius: 999px; color: #f0f0ff; padding: 12px 18px; min-height: 48px; }
.ia-form textarea::placeholder { color: #6f72a8; }
.ia-form textarea:focus { outline: none; border-color: #a99bff; box-shadow: 0 0 0 4px rgba(139, 120, 255, .22); }
.ia-send { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #5b4bc4, #8a6fff); color: #fff; box-shadow: 0 6px 18px rgba(106, 79, 224, .55); transition: transform .08s; }
.ia-send:hover { filter: brightness(1.12); }
.ia-send:active { transform: scale(.92); }

#view[data-route="ia"] .page-title { background: linear-gradient(120deg, #1a1d4a, #3b2f95); }
.ia-page { border-radius: 28px; box-shadow: 0 20px 48px rgba(14, 10, 60, .35); }
.ia-form textarea { height: 48px; line-height: 20px; padding: 14px 18px; overflow: hidden; }
.ia-form textarea::placeholder { font-size: 13px; }