/* Claudbar - side panel */
:root {
  --bg: #0e0f17; --surface: #181a26; --surface-2: #222434; --border: #2e3044; --text: #f1f1f6; --muted: #8b8da3;
  --accent-primary: #a78bfa; --accent-secondary: #38bdf8; --accent-warning: #fbbf24; --accent-danger: #f87171; --ok: #34d399;
  --text-inverse: #0e0f17; --radius-md: 10px; --shadow-lg: 0 4px 16px rgba(0, 0, 0, .25);
  --grad: #7c3aed;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }
input[type="search"], .lib-body input[type="text"] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }

.app {
  position: relative; display: flex; flex-direction: column; height: 100vh; min-width: 0; overflow: hidden;
  container-type: inline-size; container-name: app;
  background: var(--bg);
}

/* ---- Topbar ---- */
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-size: 13px; letter-spacing: normal; }
.ai-status { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s; }
.ai-status.ok { color: var(--ok); } .ai-status.wait { color: var(--accent-warning); } .ai-status.err { color: var(--accent-danger); }
.top-actions { display: flex; gap: 6px; }
#mascot-mini { width: 42px; height: 35px; flex: none; transition: opacity .3s, width .3s; }
.app:not(.has-chat) #mascot-mini { opacity: 0; width: 0; visibility: hidden; transition: opacity .3s, width .3s, visibility 0s .3s; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: 15px; transition: transform .15s var(--ease), background .15s, border-color .15s; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--accent-primary); }

/* ---- Hero ---- */
.hero { text-align: center; padding: 24px 20px 12px; overflow-y: auto; flex: 1; animation: fade-up .5s var(--ease) both; }
.app.has-chat .hero { display: none; }
.hero-mascot { width: 150px; height: 124px; margin: 8px auto 2px; }
.hero h1 { font-size: 21px; margin: 4px 0; }
.hero p { color: var(--muted); font-size: 12px; max-width: 300px; margin: 0 auto 12px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.example-btn { display: flex; flex-direction: column; gap: 2px; padding: 10px; background: var(--surface); border: 0; border-radius: var(--radius-md); cursor: pointer; transition: transform .2s var(--ease), border-color .2s, background .2s; }
.example-btn:hover { background: var(--surface-2); }
.example-btn b { font-size: 12px; } .example-btn small { font-size: 10px; color: var(--muted); }

/* ---- Chat ---- */
.chat { flex: 1; overflow-y: auto; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 12px; min-height: 0; scroll-behavior: smooth; }
.app:not(.has-chat) .chat { display: none; }
.chat::-webkit-scrollbar, .lib-body::-webkit-scrollbar { width: 6px; }
.chat::-webkit-scrollbar-thumb, .lib-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.message { display: flex; flex-direction: column; gap: 4px; animation: fade-up .3s var(--ease) both; max-width: 100%; }
.message.user { align-items: flex-end; }
.msg-head { display: flex; gap: 8px; font-size: 10px; color: var(--muted); align-items: center; }
.msg-head b { color: var(--text); font-size: 11px; letter-spacing: .04em; }
.bubble { padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 0; white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.message.user .bubble { background: var(--grad); border-color: transparent; }
.bubble pre { margin: 6px 0; padding: 8px; background: var(--bg); border-radius: 8px; overflow-x: auto; font: 11px/1.45 Consolas, monospace; white-space: pre; }
.bubble.streaming::after { content: '▍'; margin-left: 1px; animation: caret 1s steps(2) infinite; color: var(--accent-secondary); }
.bubble.empty-stream { color: var(--muted); }
.note { font-size: 11px; color: var(--accent-warning); padding: 4px 10px; border-left: 2px solid var(--accent-warning); background: rgba(251, 191, 36, .08); border-radius: 4px; animation: fade-up .3s var(--ease) both; }
.note.note-retry { font-size: 13px; color: var(--muted); }
.note.err { color: var(--accent-danger); border-color: var(--accent-danger); background: rgba(248, 113, 113, .08); white-space: pre-wrap; }
.msg-meta { font-size: 10px; color: var(--muted); }
.msg-meta .fo { color: var(--accent-warning); }
.msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .2s; position: relative; }
.message:hover .msg-actions, .message:focus-within .msg-actions, .message.show-actions .msg-actions { opacity: 1; }
.act { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 7px; border-radius: 8px; font-size: 13px; transition: background .15s, color .15s; }
.act:hover { background: var(--surface-2); color: var(--text); }
.img-out { margin: 4px 0; display: flex; flex-direction: column; gap: 4px; }
.img-out img { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); animation: fade-up .4s var(--ease) both; }
.edit-box { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.edit-box textarea { width: 100%; min-height: 60px; padding: 8px; border-radius: 10px; border: 1px solid var(--accent-primary); background: var(--bg); color: var(--text); font: inherit; resize: vertical; }
.edit-box .row { display: flex; gap: 6px; justify-content: flex-end; }
.tool-call { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-warning); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
.tool-call.success { border-left-color: var(--ok); } .tool-call.error { border-left-color: var(--accent-danger); }
.tool-call-header { display: flex; gap: 8px; } .tool-call-name { font-weight: 700; }
.tool-call-args { flex: 1; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-call-result { margin-top: 4px; color: var(--muted); white-space: pre-wrap; max-height: 120px; overflow: auto; }
.proposal { padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--accent-warning); }
.proposal-title { font-weight: 700; font-size: 11px; color: var(--accent-warning); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.proposal p { margin-bottom: 10px; } .proposal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.proposal-result.error { color: var(--accent-danger); }

/* ---- Estado / ruta ---- */
.route-note { margin: 0 12px 4px; font-size: 11px; color: var(--accent-secondary); animation: fade-up .3s var(--ease) both; }
.status { margin: 0 12px 6px; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.status-indicator { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-secondary); animation: pulse 1s infinite; }
.status-progress { height: 3px; margin-top: 5px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--grad); transition: width .3s; }

/* ---- Barra de modelo ---- */
.model-bar { display: flex; gap: 6px; align-items: center; padding: 0 12px 6px; }
.model-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: left; transition: border-color .2s, background .2s; }
.model-btn:hover { border-color: var(--accent-primary); background: var(--surface-2); }
.model-dot { color: var(--ok); font-size: 10px; transition: color .3s; }
.model-dot.warn { color: var(--accent-warning); animation: pulse 1s infinite; } .model-dot.off { color: var(--muted); }
.model-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.model-text strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-text small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caret { color: var(--muted); }
.gptar-btn { padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; transition: all .2s var(--ease); }
.gptar-btn[aria-pressed="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(99, 102, 241, .45); }
.menu { position: absolute; left: 12px; right: 12px; bottom: 120px; max-height: 50%; overflow-y: auto; z-index: 30; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: fade-up .2s var(--ease) both; }
.menu h5 { font-size: 10px; letter-spacing: .08em; color: var(--muted); padding: 6px 8px 2px; text-transform: uppercase; }
.menu-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.menu-item:hover:not(:disabled) { background: var(--surface-2); }
.menu-item.sel { background: rgba(167, 139, 250, .15); }
.menu-item:disabled { opacity: .5; cursor: default; }
.menu-item.retired b { text-decoration: line-through; }
.status-chip { font-size: 10px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.status-chip.available { color: var(--ok); border-color: rgba(52, 211, 153, .4); } .status-chip.cooling { color: var(--accent-warning); border-color: rgba(251, 191, 36, .4); } .status-chip.retired { color: var(--accent-danger); border-color: rgba(248, 113, 113, .5); font-weight: 700; }
.menu-tools { display: flex; justify-content: flex-end; padding: 2px 6px 6px; }
.menu-item b { font-size: 12px; word-break: break-all; } .menu-item .chips { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---- Adjuntos y composer ---- */
.attachments { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 6px; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 11px; max-width: 100%; animation: fade-up .25s var(--ease) both; }
.att img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; } .att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.att button { border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.composer { margin: 0 12px 12px; padding: 8px 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--accent-primary); }
#user-input { width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; max-height: 140px; min-height: 24px; }
#user-input::placeholder { color: var(--muted); }
.composer-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.spacer { flex: 1; }
.attach { cursor: pointer; }
.mic[data-state="listening"] { background: rgba(248, 113, 113, .2); border-color: var(--accent-danger); animation: pulse 1s infinite; }
.mic[data-state="processing"] { background: rgba(251, 191, 36, .2); border-color: var(--accent-warning); }
.mic[data-state="speaking"] { background: rgba(56, 189, 248, .2); border-color: var(--accent-secondary); }
.send-btn, .stop-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; background: var(--grad); transition: transform .15s var(--ease); }
.stop-btn { background: var(--accent-danger); }

/* ---- Biblioteca ---- */
.library { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; background: rgba(14, 15, 23, .96); backdrop-filter: blur(8px); transform: translateX(-102%); transition: transform .3s var(--ease); }
.app[data-lib="open"] .library { transform: none; }
.lib-head { display: flex; gap: 8px; padding: 12px 12px 6px; } .lib-head .btn-primary { flex: 1; }
.lib-tabs { display: flex; gap: 4px; padding: 4px 12px 8px; overflow-x: auto; }
.lib-tab { flex: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 11px; cursor: pointer; transition: all .2s; }
.lib-tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.lib-body { flex: 1; overflow-y: auto; padding: 0 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.lib-body h4 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; }
.lib-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s; animation: fade-up .25s var(--ease) both; }
.lib-item.col { flex-direction: column; align-items: stretch; } .lib-item.current { border-color: var(--accent-primary); } .lib-item:hover { border-color: var(--accent-primary); }
.lib-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; background: transparent; cursor: pointer; }
.lib-main.static { cursor: default; } .lib-main b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-main small { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.lib-main small.warn, .lib-body .warn { color: var(--accent-warning); white-space: normal; }
.lib-actions { display: flex; gap: 4px; flex-wrap: nowrap; } .lib-actions.wrap { flex-wrap: wrap; }
.row-gap { display: flex; gap: 6px; } .hint { font-size: 11px; color: var(--muted); }

/* ---- Mascota: nube (solo transform/opacity en animaciones infinitas) ---- */
.mascot { --gx: 0px; --gy: 0px; display: inline-block; }
.mascot svg { width: 100%; height: 100%; overflow: visible; }
.mascot svg * { transform-box: fill-box; }
.mascot .m-body, .mascot .m-arm { transform-box: view-box; }
.m-enter, .m-float, .m-shadow { transform-origin: center; }
.m-float { animation: m-float 4.2s ease-in-out infinite; }
.m-body { transform-origin: 76px 98px; animation: m-breathe 5s ease-in-out infinite; }
.m-shadow { fill: rgba(0, 0, 0, .35); animation: m-shadow 4.2s ease-in-out infinite; }
.m-glow { fill: #8b9bff; opacity: .28; }
.m-cheek { fill: #fda4c0; opacity: .55; }
.m-cloud { filter: drop-shadow(0 2px 3px rgba(80, 90, 200, .25)); }
.m-pupil { fill: #1e1b4b; }
.m-spark { fill: #fff; }
.m-eyes { transform-origin: center; animation: m-blink 5.2s infinite; transition: opacity .2s; }
.m-eye { transform: translate(var(--gx), var(--gy)); transition: transform .45s var(--ease); }
.m-ring, .m-dots, .m-sparks, .m-zzz, .m-happy, .m-sleepeye, .m-brows { opacity: 0; transition: opacity .25s; }
.m-ring { stroke: #7dd3fc; stroke-width: 1.6; }
.m-dots circle { fill: #c4b5fd; }
.m-sparks path { fill: #fde68a; }
.m-zzz text { fill: #a5b4fc; font: 700 10px sans-serif; } .m-zzz text.s2 { font-size: 13px; } .m-zzz text.s3 { font-size: 16px; }
.m-happy path, .m-sleepeye path, .m-brows path { fill: none; stroke: #1e1b4b; stroke-width: 3; stroke-linecap: round; }
.m-mouth { fill: none; stroke: #1e1b4b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; d: path("M69 84 Q76 89 83 84"); transition: d .3s var(--ease), fill .3s; }
.m-arm { transition: transform .5s var(--ease), opacity .3s; }
.m-arm.l { transform-origin: 33px 86px; } .m-arm.r { transform-origin: 119px 86px; }
.m-arm-line { fill: none; stroke: #dfe6ff; stroke-width: 7; stroke-linecap: round; }
.m-hand { fill: #eef2ff; }
.mascot:where(:not([data-state="sleeping"], [data-state="success"], [data-state="excited"], [data-state="speaking"], [data-state="phone"])) .m-arm.l { animation: m-sway-l 4.6s ease-in-out infinite; }
.mascot:where(:not([data-state="sleeping"], [data-state="success"], [data-state="excited"], [data-state="speaking"], [data-state="phone"])) .m-arm.r { animation: m-sway-r 4.6s ease-in-out infinite .6s; }

.mascot[data-state="listening"] .m-ring { opacity: 1; animation: m-ripple 1.8s ease-out infinite; transform-origin: center; }
.mascot[data-state="listening"] .m-pupil { transform: scale(1.14); }
.mascot[data-state="listening"] .m-body { transform: translateY(1px) rotate(-2deg); animation: none; }
.mascot[data-state="listening"] .m-mouth { d: path("M71 85 Q76 87 81 85"); }
.mascot[data-state="listening"] .m-arm.r { transform: rotate(-22deg); animation: none; }

.mascot[data-state="thinking"] .m-dots { opacity: 1; }
.mascot[data-state="thinking"] .m-dots circle { animation: m-dot 1.3s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-dots circle:nth-child(2) { animation-delay: .18s; } .mascot[data-state="thinking"] .m-dots circle:nth-child(3) { animation-delay: .36s; }
.mascot[data-state="thinking"] .m-body { animation: m-wobble 3.2s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-mouth { d: path("M71 86 Q76 85 81 86"); }
.mascot[data-state="thinking"] .m-arm.r { animation: m-think-hand 2.6s ease-in-out infinite; }

.mascot[data-state="speaking"] .m-mouth { fill: #4c1d95; animation: m-talk .36s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-body { animation: m-talkbody .6s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-arm.l { animation: m-gesture .9s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-arm.r { animation: m-gesture .9s ease-in-out infinite alternate-reverse; }

.mascot[data-state="success"] .m-eyes { opacity: 0; } .mascot[data-state="success"] .m-happy { opacity: 1; }
.mascot[data-state="success"] .m-sparks { opacity: 1; animation: pulse 1s ease-in-out 2; }
.mascot[data-state="success"] .m-float { animation: m-bounce .6s var(--ease) 2; }
.mascot[data-state="success"] .m-mouth { d: path("M65 82 Q76 95 87 82"); }
.mascot[data-state="success"] .m-arm.l { animation: m-cheer-l .5s ease-in-out infinite alternate; }
.mascot[data-state="success"] .m-arm.r { animation: m-cheer-r .5s ease-in-out infinite alternate; }

.mascot[data-state="error"] .m-brows { opacity: 1; }
.mascot[data-state="error"] .m-float { animation: m-droop 2.4s ease-in-out 1; }
.mascot[data-state="error"] .m-mouth { d: path("M70 88 Q76 83 82 88"); }
.mascot[data-state="error"] .m-glow { fill: #fda4af; }

.mascot[data-state="sleeping"] .m-eyes { opacity: 0; }
.mascot[data-state="sleeping"] .m-sleepeye, .mascot[data-state="sleeping"] .m-zzz { opacity: 1; }
.mascot[data-state="sleeping"] .m-zzz text { animation: m-zzz-rise 3.6s ease-in-out infinite; }
.mascot[data-state="sleeping"] .m-zzz text:nth-child(2) { animation-delay: 1.2s; }
.mascot[data-state="sleeping"] .m-zzz text:nth-child(3) { animation-delay: 2.4s; }
.mascot[data-state="sleeping"] .m-enter { transform: rotate(-4deg) translateY(3px); }
.mascot[data-state="sleeping"] .m-float { animation-duration: 7s; }
.mascot[data-state="sleeping"] .m-body { animation-duration: 7s; }
.mascot[data-state="sleeping"] svg { filter: saturate(.7) brightness(.85); }
.mascot[data-state="sleeping"] .m-mouth { d: path("M72 85 Q76 87 80 85"); }

.mascot[data-state="excited"] .m-float { animation: m-bounce .5s var(--ease) 3; }
.mascot[data-state="excited"] .m-pupil { transform: scale(1.18); }
.mascot[data-state="excited"] .m-sparks { opacity: 1; animation: pulse .7s infinite 3; }
.mascot[data-state="excited"] .m-mouth { fill: #4c1d95; d: path("M66 82 Q76 99 86 82 Z"); }
.mascot[data-state="excited"] .m-arm.l { transform: rotate(105deg); animation: none; } .mascot[data-state="excited"] .m-arm.r { transform: rotate(-105deg); animation: none; }

/* Saludo con la mano (apertura y bajo demanda) */
.mascot[data-wave][data-state] .m-arm.r { animation: m-wave 1.8s ease-in-out both; }
/* Animación de apertura: aparece, flota, abre los ojos, saluda y sonríe */
.mascot[data-intro] .m-enter { animation: m-appear .8s var(--ease) both; }
.mascot[data-intro] .m-eyes { animation: m-eyes-in .45s ease-out .8s both; }
.mascot[data-intro] .m-eye { transition: none; }
.mascot[data-intro] .m-mouth { animation: m-smile-in .5s ease-out 2.1s both; }
.mascot.paused *, .mascot.paused { animation-play-state: paused !important; }

/* ---- Saludo y nombre ---- */
.hero-copy { margin-top: 2px; }
.hero.intro .hero-copy { animation: fade-up .6s var(--ease) 1.9s both; }
.hero h1 { font-weight: 600; letter-spacing: .005em; }
.hero .greet-sub { color: var(--muted); font-size: 13px; margin: 2px auto 8px; max-width: 300px; }
.assistant-name { display: inline-block; margin: 0 auto 12px; padding: 3px 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-secondary); border: 1px solid var(--border); border-radius: 999px; background: rgba(56, 189, 248, .08); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .setup-hint { margin: 0 auto 12px; max-width: 300px; padding: 8px 10px; font-size: 12px; color: var(--text); background: rgba(251, 191, 36, .1); border: 1px solid rgba(251, 191, 36, .4); border-radius: var(--radius-md); }
.setup-hint button { margin-left: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent-primary); background: transparent; cursor: pointer; font-size: 11px; }
.setup-hint button:hover { background: var(--surface-2); }

/* ---- Nube con vida propia: celular, sueño, rebote al tocarla y globo de diálogo ---- */
.mascot[role="button"] { cursor: pointer; border-radius: 18px; }
.mascot[role="button"]:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.m-enter { transition: transform .8s var(--ease); }
.m-phone { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.9); transform-origin: 76px 112px; transition: opacity .35s ease, transform .5s var(--ease); }
.mascot .m-phone { transform-box: view-box; }
.m-phone-body { fill: #1f2937; stroke: #a5b4fc; stroke-width: 1.2; }
.m-parm { fill: none; stroke: #eef2ff; stroke-width: 6.5; stroke-linecap: round; }
.m-parm-shadow { fill: none; stroke: #9fb0f5; stroke-width: 9; stroke-linecap: round; opacity: .4; }
.m-thumb { fill: #fff; }
.m-screenglow { fill: #7dd3fc; opacity: 0; }
.mascot[data-state="phone"] .m-phone { opacity: 1; transform: none; }
.mascot[data-state="phone"] .m-arm { opacity: 0; }
.mascot[data-state="phone"] .m-eye { transform: translate(0, 2.5px); }
.mascot[data-state="phone"] .m-eyes .m-eye:last-child { animation: m-wink 4.8s ease-in-out infinite; }
.mascot[data-state="phone"] .m-mouth { d: path("M70 86 Q76 89 82 85"); }
.mascot[data-state="phone"] .m-lines { animation: m-scroll 2s linear infinite; }
.mascot[data-state="phone"] .m-thumb.l { animation: m-tap .42s ease-in-out infinite alternate; }
.mascot[data-state="phone"] .m-thumb.r { animation: m-tap .42s ease-in-out infinite alternate-reverse; }
.mascot[data-state="phone"] .m-screenglow { animation: m-glowpulse 2.4s ease-in-out infinite; }
.mascot[data-bounce] .m-enter { transform-origin: 50% 92%; animation: m-bounce-click .7s var(--ease) both; }

/* Globo de diálogo: el texto entra con fade-in + slide-up cada vez que la nube habla */
.cloud-bubble { position: relative; margin: 10px auto 8px; padding: 10px 14px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 18px rgba(124, 58, 237, .12); }
.cloud-bubble::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); border-top-left-radius: 3px; }
.hero .cloud-bubble h1 { font-size: 16px; margin: 0; line-height: 1.35; }
.hero .cloud-bubble .greet-sub { margin: 4px auto 0; max-width: none; min-height: 1.3em; }
.bubble-line.swap-out { opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; }
.bubble-line.swap-in { animation: bubble-in .45s var(--ease) both; }
.cloud-bubble.mini { position: absolute; z-index: 12; top: 52px; left: 12px; width: fit-content; max-width: calc(100% - 24px); margin: 0; padding: 7px 12px; font-size: 12px; line-height: 1.35; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.cloud-bubble.mini::before { left: 20px; margin-left: 0; }
.cloud-bubble.mini.show { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.app:not(.has-chat) .cloud-bubble.mini { display: none; }

/* ---- Animaciones ---- */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
/* keyframes de la nube */
@keyframes m-float { 50% { transform: translateY(-4px); } }
@keyframes m-breathe { 50% { transform: scale(1.025); } }
@keyframes m-shadow { 50% { transform: scale(.88); opacity: .6; } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes m-ripple { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
@keyframes m-wobble { 50% { transform: rotate(-2.5deg) translateY(-2px); } }
@keyframes m-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes m-talk { from { d: path("M69 84 Q76 86 83 84 Z"); } to { d: path("M69 83 Q76 96 83 83 Z"); } }
@keyframes m-talkbody { to { transform: scale(1.03); } }
@keyframes m-gesture { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes m-sway-l { 50% { transform: rotate(-5deg); } }
@keyframes m-sway-r { 50% { transform: rotate(5deg); } }
@keyframes m-think-hand { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-26deg); } }
@keyframes m-bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } }
@keyframes m-cheer-l { from { transform: rotate(100deg); } to { transform: rotate(118deg); } }
@keyframes m-cheer-r { from { transform: rotate(-100deg); } to { transform: rotate(-118deg); } }
@keyframes m-droop { 0%, 100% { transform: translateY(0) rotate(0); } 30%, 70% { transform: translateY(2px) rotate(-3deg); } }
@keyframes m-zzz-rise { 0% { opacity: 0; transform: translate(0, 6px) scale(.7); } 25%, 75% { opacity: 1; } 100% { opacity: 0; transform: translate(5px, -12px) scale(1.1); } }
@keyframes m-wink { 0%, 90%, 100% { transform: translate(0, 2.5px) scaleY(1); } 94% { transform: translate(0, 2.5px) scaleY(.08); } }
@keyframes m-scroll { to { transform: translateY(-12px); } }
@keyframes m-tap { from { transform: translateY(0); } to { transform: translateY(-2.2px); } }
@keyframes m-glowpulse { 0%, 100% { opacity: .1; } 50% { opacity: .26; } }
@keyframes m-bounce-click { 0% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(2px) scale(1.08, .9); } 42% { transform: translateY(-16px) scale(.94, 1.08); } 66% { transform: translateY(0) scale(1.06, .94); } 82% { transform: translateY(-5px) scale(.98, 1.02); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes m-wave { 0% { transform: rotate(0); } 12% { transform: rotate(-105deg); } 28% { transform: rotate(-80deg); } 44% { transform: rotate(-112deg); } 60% { transform: rotate(-82deg); } 76% { transform: rotate(-108deg); } 100% { transform: rotate(0); } }
@keyframes m-appear { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes m-eyes-in { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
@keyframes m-smile-in { from { d: path("M71 85 Q76 85 81 85"); } to { d: path("M69 84 Q76 89 83 84"); } }

/* ---- Responsive (300px - 400px+) ---- */
@container app (max-width: 340px) {
  .cards { grid-template-columns: 1fr; } .hero-mascot { width: 120px; height: 99px; } .hero h1 { font-size: 18px; } .hero .cloud-bubble h1 { font-size: 14.5px; }
  .gptar-btn { padding: 8px; font-size: 11px; } .lib-actions { flex-wrap: wrap; } .msg-actions { opacity: 1; }
}
@container app (min-width: 460px) { .chat, .hero { padding-left: 20px; padding-right: 20px; } .cards { grid-template-columns: repeat(4, 1fr); } }
@media (hover: none) { .msg-actions { opacity: 1; } }

/* ---- Efectos de habla de la nube: cada frase entra con uno distinto (ui/speech-bubble.js elige fx-*) ---- */
.bubble-line.swap-in.fx-pop    { animation: fx-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.bubble-line.swap-in.fx-float  { animation: fx-float .7s var(--ease) both; }
.bubble-line.swap-in.fx-pulse  { animation: fx-pulse .65s ease-out both; }
.bubble-line.swap-in.fx-slide  { animation: fx-slide .5s var(--ease) both; }
.bubble-line.swap-in.fx-blur   { animation: fx-blur .6s ease-out both; }
.bubble-line.swap-in.fx-bounce { animation: fx-bounce .75s var(--ease) both; }
.bubble-line.swap-in.fx-swing  { animation: fx-swing .7s ease-out both; transform-origin: top center; }
.bubble-line.swap-in.fx-zoom   { animation: fx-zoom .55s var(--ease) both; }
.bubble-line.swap-in.fx-wave   { animation: fx-wave .8s ease-out both; }
.bubble-line.swap-in.fx-flip   { animation: fx-flip .6s var(--ease) both; transform-origin: center bottom; }
@keyframes fx-pop    { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes fx-float  { 0% { opacity: 0; transform: translateY(14px); } 60% { opacity: 1; transform: translateY(-3px); } 100% { transform: none; } }
@keyframes fx-pulse  { 0% { opacity: 0; transform: scale(.94); text-shadow: 0 0 0 transparent; } 45% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 14px rgba(167, 139, 250, .8); } 100% { transform: none; text-shadow: none; } }
@keyframes fx-slide  { 0% { opacity: 0; transform: translateX(-22px); } 100% { opacity: 1; transform: none; } }
@keyframes fx-blur   { 0% { opacity: 0; filter: blur(8px); letter-spacing: .12em; } 100% { opacity: 1; filter: none; letter-spacing: normal; } }
@keyframes fx-bounce { 0% { opacity: 0; transform: translateY(-16px); } 45% { opacity: 1; transform: translateY(4px); } 70% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes fx-swing  { 0% { opacity: 0; transform: rotate(-7deg); } 40% { opacity: 1; transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes fx-zoom   { 0% { opacity: 0; transform: scale(1.35); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes fx-wave   { 0% { opacity: 0; transform: translateY(8px) skewX(-8deg); } 35% { opacity: 1; transform: translateY(-4px) skewX(5deg); } 65% { transform: translateY(2px) skewX(-2deg); } 100% { transform: none; } }
@keyframes fx-flip   { 0% { opacity: 0; transform: perspective(300px) rotateX(75deg); } 100% { opacity: 1; transform: none; } }

/* El globo reacciona con propiedades individuales (scale/rotate/translate) para no pisar el transform de .mini.show */
.cloud-bubble.fx-pop, .cloud-bubble.fx-zoom   { animation: fxb-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.cloud-bubble.fx-float, .cloud-bubble.fx-wave { animation: fxb-float 1.6s ease-in-out; }
.cloud-bubble.fx-pulse, .cloud-bubble.fx-blur { animation: fxb-glow .9s ease-out; }
.cloud-bubble.fx-bounce, .cloud-bubble.fx-flip { animation: fxb-bounce .7s var(--ease); }
.cloud-bubble.fx-swing, .cloud-bubble.fx-slide { animation: fxb-swing .7s ease-out; }
@keyframes fxb-pop    { 0% { scale: .92; } 60% { scale: 1.04; } 100% { scale: 1; } }
@keyframes fxb-float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes fxb-glow   { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, .55); } 100% { box-shadow: 0 0 0 12px rgba(167, 139, 250, 0), 0 6px 18px rgba(124, 58, 237, .12); } }
@keyframes fxb-bounce { 0%, 100% { translate: 0 0; } 35% { translate: 0 -6px; } 65% { translate: 0 2px; } }
@keyframes fxb-swing  { 0%, 100% { rotate: 0deg; } 30% { rotate: -1.6deg; } 65% { rotate: 1deg; } }

/* ---- Menú ☰ (herramientas de IA + biblioteca) ---- */
.menu-btn .burger { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.menu-btn .burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.drawer .lib-head { align-items: center; padding: 14px 14px 8px; }
.drawer-title { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.drawer-title strong { font-size: 16px; }
.drawer-title small { font-size: 11px; color: var(--muted); }
.drawer .lib-head .btn-primary { flex: none; }
.drawer-switch { display: flex; gap: 4px; margin: 2px 14px 10px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.drawer-tab { flex: 1; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background .2s var(--ease), color .2s; }
.drawer-tab:hover { color: var(--text); }
.drawer[data-view="tools"] .drawer-tab[data-view="tools"], .drawer[data-view="library"] .drawer-tab[data-view="library"] { background: var(--grad); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, .28); }
.drawer[data-view="tools"] .drawer-lib, .drawer[data-view="library"] .ai-tools { display: none; }
.drawer-lib { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.ai-tools { flex: 1; overflow-y: auto; padding: 0 14px 18px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tool-group h4 { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 2px 8px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.tool-tile {
  position: relative; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  padding: 10px; text-align: left; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
  animation: fade-up .32s var(--ease) both;
}
.tool-tile::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .2s; }
.tool-tile:hover { border-color: var(--accent-primary); }
.tool-tile:hover::before { opacity: .07; }
.tool-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(167, 139, 250, .35); }
.tool-tile.active { border-color: var(--accent-primary); background: rgba(124, 58, 237, .14); }
.tool-ico { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--surface-2); position: relative; }
.tool-tile.active .tool-ico { background: var(--grad); }
.tool-tile b { font-size: 12px; line-height: 1.25; position: relative; }
.tool-tile small { font-size: 10px; color: var(--muted); line-height: 1.3; position: relative; }

.tool-chip { display: flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 12px 6px; padding: 4px 6px 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: rgba(124, 58, 237, .18); border: 1px solid rgba(167, 139, 250, .5); animation: fx-pop .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.tool-chip button { border: 0; background: rgba(255, 255, 255, .08); color: var(--text); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 10px; }
.tool-chip button:hover { background: rgba(255, 255, 255, .18); }

/* ---- Entrada de las respuestas de la nube (una distinta cada vez) ---- */
.message.enter.enter-rise   { animation: msg-rise .45s var(--ease) both; }
.message.enter.enter-pop    { animation: msg-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: left top; }
.message.enter.enter-drift  { animation: msg-drift .55s var(--ease) both; }
.message.enter.enter-glow   { animation: fade-up .35s var(--ease) both; }
.message.enter.enter-glow .bubble { animation: msg-glow 1.1s ease-out both; }
.message.enter.enter-swing  { animation: msg-swing .6s ease-out both; transform-origin: left top; }
.message.enter.enter-unfold { animation: msg-unfold .5s var(--ease) both; transform-origin: top; }
@keyframes msg-rise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes msg-pop    { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes msg-drift  { from { opacity: 0; transform: translateX(-18px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes msg-glow   { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, .55); } 100% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); } }
@keyframes msg-swing  { 0% { opacity: 0; transform: rotate(-4deg); } 50% { opacity: 1; transform: rotate(1.5deg); } 100% { transform: none; } }
@keyframes msg-unfold { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }

/* ---- Biblioteca / historial (rediseño) ---- */
.drawer .lib-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 12px; overflow: visible; }
.drawer .lib-tab {
  flex: 1 1 auto; padding: 6px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: background .2s var(--ease), color .2s, border-color .2s;
}
.drawer .lib-tab:hover { color: var(--text); border-color: #3d4060; }
.drawer .lib-tab.active { background: rgba(167, 139, 250, .16); color: #fff; border-color: rgba(167, 139, 250, .6); }
.drawer .lib-body { padding: 0 14px 18px; gap: 8px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.drawer .lib-body > input[type="search"], .drawer .lib-body input[type="search"] {
  padding: 10px 12px 10px 34px; border-radius: 12px; background: var(--surface) no-repeat 12px 50% / 14px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8da3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  margin-bottom: 4px; transition: border-color .15s, box-shadow .15s;
}
.drawer .lib-body input[type="search"]:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(167, 139, 250, .25); }
.drawer .lib-item {
  position: relative; gap: 10px; padding: 11px 12px; border-radius: 14px;
  background: var(--surface);
  transition: border-color .18s, transform .18s var(--ease), box-shadow .18s;
}
.drawer .lib-item:hover { border-color: #3d4060; }
.drawer .lib-item.current { border-color: rgba(167, 139, 250, .7); box-shadow: inset 3px 0 0 var(--accent-primary); }
.drawer .lib-main { gap: 3px; padding: 0; color: var(--text); }
.drawer .lib-main b { font-size: 13px; font-weight: 600; }
.drawer .lib-main small { font-size: 10.5px; }
.drawer .lib-actions { gap: 2px; opacity: .35; transition: opacity .18s; }
.drawer .lib-item:hover .lib-actions, .drawer .lib-item:focus-within .lib-actions, .drawer .lib-item.current .lib-actions, .drawer .lib-actions.wrap { opacity: 1; }
.drawer .lib-actions .btn-ghost.btn-sm { padding: 4px 7px; border-color: transparent; background: transparent; font-size: 12px; }
.drawer .lib-actions .btn-ghost.btn-sm:hover { background: var(--surface-2); border-color: var(--border); }
.drawer .lib-body > .btn-ghost, .drawer .lib-body > div > .btn-ghost { margin-top: 4px; }
.drawer .lib-body .empty { padding: 26px 12px; text-align: center; border: 1px dashed var(--border); border-radius: 14px; }
@media (hover: none) { .drawer .lib-actions { opacity: 1; } }

/* ---- Cita de la selección + sugerencias rápidas ---- */
.quote-box { margin: 0 12px 6px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent-primary); animation: fade-up .2s var(--ease) both; }
.quote-head { display: flex; align-items: center; justify-content: space-between; } .quote-head small { color: var(--muted); font-size: 10.5px; font-weight: 600; }
.quote-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 6px; border-radius: 6px; } .quote-x:hover { color: var(--text); background: var(--surface-2); }
.quote-text { font-size: 12px; color: var(--text); opacity: .9; margin: 3px 0 6px; white-space: pre-wrap; max-height: 72px; overflow: hidden; }
.quote-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.quote-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 11px; padding: 4px 9px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; }
.quote-chip:hover { border-color: var(--accent-primary); background: rgba(167, 139, 250, .12); }
.app[data-font="small"] .bubble { font-size: 13px; } .app[data-font="medium"] .bubble { font-size: 14px; } .app[data-font="large"] .bubble { font-size: 16px; }

/* ---- Agente Claudbar Agent: pasos (👁 Ojo · 🧠 Cerebro · ✋ Manos · 📖 Analista) ---- */
.agent-step {
  --role: var(--accent-primary);
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--role);
  animation: fade-up .3s var(--ease) both; font-size: 12px;
}
.agent-step.role-eye { --role: #38bdf8; }
.agent-step.role-brain { --role: #a78bfa; }
.agent-step.role-hand { --role: #fbbf24; }
.agent-step.role-analyst { --role: #34d399; }
.agent-step .as-ico { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.agent-step[data-state="run"] .as-ico { animation: as-pulse 1.1s ease-in-out infinite; }
.agent-step[data-state="err"] { border-left-color: var(--accent-danger); }
.agent-step .as-main { min-width: 0; flex: 1; }
.agent-step .as-title { display: flex; gap: 6px; align-items: baseline; }
.agent-step .as-title small { color: var(--role); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.agent-step .as-title b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-step .as-detail { margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
@keyframes as-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--role) 25%, transparent); } }
.agent-prompt { border-color: rgba(167, 139, 250, .6); background: var(--surface); }
.agent-prompt.ask { border-color: rgba(56, 189, 248, .6); }
.agent-prompt .proposal-title { color: #c4b5fd; }
.agent-prompt.ask .proposal-title { color: #7dd3fc; }
.agent-prompt-text { white-space: pre-wrap; }
.agent-input { width: 100%; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.agent-input:focus { outline: none; border-color: var(--accent-primary); }

/* Actos de la nube: cada frase combina cuerpo + brazos + cara + efecto (ui/cloud-acts.js). Duran ~2,6 s. */
.m-fx { pointer-events: none; }
.m-fx text { opacity: 0; font: 700 13px "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; fill: #fde68a; }
.mascot.mascot[data-ab] .m-body { animation-duration: 1.3s; animation-timing-function: var(--ease); animation-iteration-count: 2; animation-fill-mode: both; }
.mascot.mascot[data-ab="hop"] .m-body { animation-name: a-hop; }
.mascot.mascot[data-ab="spin"] .m-body { animation-name: a-spin; animation-iteration-count: 1; }
.mascot.mascot[data-ab="shake"] .m-body { animation-name: a-shake; animation-duration: .5s; animation-iteration-count: 4; }
.mascot.mascot[data-ab="tilt-l"] .m-body { animation-name: a-tilt-l; }
.mascot.mascot[data-ab="tilt-r"] .m-body { animation-name: a-tilt-r; }
.mascot.mascot[data-ab="squash"] .m-body { animation-name: a-squash; animation-duration: .9s; }
.mascot.mascot[data-ab="rise"] .m-body { animation-name: a-rise; animation-duration: 2.6s; animation-iteration-count: 1; }
.mascot.mascot[data-ab="sink"] .m-body { animation-name: a-sink; animation-duration: 2.6s; animation-iteration-count: 1; }
.mascot.mascot[data-ab="sway"] .m-body { animation-name: a-sway; }
.mascot.mascot[data-ab="zoom"] .m-body { animation-name: a-zoom; animation-duration: .8s; }
.mascot.mascot[data-ab="wobble"] .m-body { animation-name: a-wobble; animation-duration: .65s; animation-iteration-count: 3; }
.mascot.mascot[data-ab="nod"] .m-body { animation-name: a-nod; animation-duration: .6s; animation-iteration-count: 3; }

.mascot.mascot[data-aa] .m-arm { animation-duration: .55s; animation-iteration-count: 4; animation-direction: alternate; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.mascot.mascot[data-aa="wave-l"] .m-arm.l { animation-name: a-wave-l; }
.mascot.mascot[data-aa="wave-r"] .m-arm.r { animation-name: a-wave-r; }
.mascot.mascot[data-aa="cheer"] .m-arm.l { animation-name: m-cheer-l; } .mascot.mascot[data-aa="cheer"] .m-arm.r { animation-name: m-cheer-r; }
.mascot.mascot[data-aa="hug"] .m-arm.l { animation-name: a-hug-l; } .mascot.mascot[data-aa="hug"] .m-arm.r { animation-name: a-hug-r; }
.mascot.mascot[data-aa="point"] .m-arm.r { animation-name: a-point; animation-iteration-count: 2; }
.mascot.mascot[data-aa="facepalm"] .m-arm.r { animation-name: a-facepalm; animation-iteration-count: 2; }
.mascot.mascot[data-aa="clap"] .m-arm.l { animation-name: a-clap-l; animation-duration: .25s; animation-iteration-count: 8; }
.mascot.mascot[data-aa="clap"] .m-arm.r { animation-name: a-clap-r; animation-duration: .25s; animation-iteration-count: 8; }
.mascot.mascot[data-aa="shrug"] .m-arm.l { animation-name: a-shrug-l; animation-iteration-count: 2; } .mascot.mascot[data-aa="shrug"] .m-arm.r { animation-name: a-shrug-r; animation-iteration-count: 2; }
.mascot.mascot[data-aa="stretch"] .m-arm.l { animation-name: a-stretch-l; animation-duration: 1.3s; animation-iteration-count: 2; }
.mascot.mascot[data-aa="stretch"] .m-arm.r { animation-name: a-stretch-r; animation-duration: 1.3s; animation-iteration-count: 2; }
.mascot.mascot[data-aa="phone"] .m-phone { opacity: 1; transform: none; } .mascot.mascot[data-aa="phone"] .m-arm { opacity: 0; animation: none; }
.mascot.mascot[data-aa="rest"] .m-arm { animation-name: a-rest; animation-duration: 1.3s; animation-iteration-count: 2; }

.mascot.mascot[data-af="happy"] .m-eyes, .mascot.mascot[data-af="laugh"] .m-eyes { opacity: 0; }
.mascot.mascot[data-af="happy"] .m-happy, .mascot.mascot[data-af="laugh"] .m-happy { opacity: 1; }
.mascot.mascot[data-af="happy"] .m-mouth, .mascot.mascot[data-af="love"] .m-mouth { d: path("M66 82 Q76 93 86 82"); }
.mascot.mascot[data-af="laugh"] .m-mouth { fill: #4c1d95; animation: m-talk .22s ease-in-out infinite alternate; }
.mascot.mascot[data-af="wink"] .m-eyes .m-eye:last-child { animation: m-wink 1.3s ease-in-out 2; }
.mascot.mascot[data-af="wink"] .m-mouth { d: path("M68 83 Q78 90 85 81"); }
.mascot.mascot[data-af="surprised"] .m-pupil { transform: scale(1.3); }
.mascot.mascot[data-af="surprised"] .m-mouth { d: path("M73 84 Q76 92 79 84 Q76 80 73 84"); fill: #4c1d95; }
.mascot.mascot[data-af="sleepy"] .m-eyes, .mascot.mascot[data-af="yawn"] .m-eyes { opacity: 0; }
.mascot.mascot[data-af="sleepy"] .m-sleepeye, .mascot.mascot[data-af="yawn"] .m-sleepeye { opacity: 1; }
.mascot.mascot[data-af="sleepy"] .m-mouth { d: path("M72 86 Q76 87 80 86"); }
.mascot.mascot[data-af="yawn"] .m-mouth { fill: #4c1d95; animation: a-yawn 1.3s ease-in-out 2; }
.mascot.mascot[data-af="cool"] .m-brows { opacity: 1; transform: translateY(5px) scaleY(.4); }
.mascot.mascot[data-af="cool"] .m-mouth { d: path("M70 85 Q78 88 84 83"); }
.mascot.mascot[data-af="worried"] .m-brows { opacity: 1; transform: scaleX(-1); }
.mascot.mascot[data-af="worried"] .m-mouth { d: path("M69 88 Q76 83 83 88"); }
.mascot.mascot[data-af="love"] .m-pupil { fill: #e11d48; transform: scale(1.2); }
.mascot.mascot[data-af="love"] .m-cheek, .mascot.mascot[data-af="blush"] .m-cheek { opacity: 1; fill: #fb7185; animation: pulse .65s ease-in-out 4; }
.mascot.mascot[data-af="blush"] .m-mouth { d: path("M71 85 Q76 88 81 85"); }
.mascot.mascot[data-af="neutral"] .m-mouth { d: path("M70 86 Q76 86 82 86"); }

.mascot.mascot[data-ax]:not([data-ax="none"]) .m-fx text { animation: a-fx 1.3s ease-out 2 both; }
.mascot.mascot[data-ax] .m-fx text.f2 { animation-delay: .3s; } .mascot.mascot[data-ax] .m-fx text.f3 { animation-delay: .6s; }
.mascot.mascot[data-ax="rain"] .m-fx text, .mascot.mascot[data-ax="snow"] .m-fx text { animation-name: a-fall; }
.mascot.mascot[data-ax="wind"] .m-fx text { animation-name: a-blow; }
.mascot.mascot[data-ax="bolt"] .m-fx text { animation-name: a-flash; }
.mascot[data-ax="rain"] .m-fx text { fill: #7dd3fc; }
.mascot[data-ax="snow"] .m-fx text, .mascot[data-ax="fog"] .m-fx text, .mascot[data-ax="wind"] .m-fx text { fill: #e0f2fe; }
.mascot[data-ax="hearts"] .m-fx text { fill: #fb7185; }
.mascot[data-ax="zzz"] .m-fx text, .mascot[data-ax="notes"] .m-fx text { fill: #a5b4fc; }

@keyframes a-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-10px) scale(.97, 1.04); } 60% { transform: translateY(0) scale(1.05, .95); } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-shake { 25% { transform: translateX(-3px) rotate(-2deg); } 75% { transform: translateX(3px) rotate(2deg); } }
@keyframes a-tilt-l { 50% { transform: rotate(-9deg); } }
@keyframes a-tilt-r { 50% { transform: rotate(9deg); } }
@keyframes a-squash { 40% { transform: scale(1.12, .86); } 70% { transform: scale(.95, 1.06); } }
@keyframes a-rise { 30%, 70% { transform: translateY(-12px); } }
@keyframes a-sink { 30%, 70% { transform: translateY(7px) scale(1.04, .94); } }
@keyframes a-sway { 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
@keyframes a-zoom { 45% { transform: scale(1.14); } }
@keyframes a-wobble { 25% { transform: skewX(-6deg); } 75% { transform: skewX(6deg); } }
@keyframes a-nod { 50% { transform: translateY(3px) rotate(2deg); } }
@keyframes a-wave-l { from { transform: rotate(95deg); } to { transform: rotate(125deg); } }
@keyframes a-wave-r { from { transform: rotate(-95deg); } to { transform: rotate(-125deg); } }
@keyframes a-hug-l { to { transform: rotate(-40deg); } }
@keyframes a-hug-r { to { transform: rotate(40deg); } }
@keyframes a-point { to { transform: rotate(-70deg); } }
@keyframes a-facepalm { to { transform: rotate(-150deg) translateX(-6px); } }
@keyframes a-clap-l { to { transform: rotate(-55deg); } }
@keyframes a-clap-r { to { transform: rotate(55deg); } }
@keyframes a-shrug-l { to { transform: rotate(45deg); } }
@keyframes a-shrug-r { to { transform: rotate(-45deg); } }
@keyframes a-stretch-l { 50% { transform: rotate(150deg); } }
@keyframes a-stretch-r { 50% { transform: rotate(-150deg); } }
@keyframes a-rest { 50% { transform: rotate(-12deg) translateY(2px); } }
@keyframes a-yawn { 0%, 100% { d: path("M72 85 Q76 86 80 85 Z"); } 50% { d: path("M70 82 Q76 98 82 82 Z"); } }
@keyframes a-fx { 0% { opacity: 0; transform: translateY(6px) scale(.6); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1.15); } }
@keyframes a-fall { 0% { opacity: 0; transform: translateY(-6px); } 25%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes a-blow { 0% { opacity: 0; transform: translateX(-12px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(16px); } }
@keyframes a-flash { 0%, 100% { opacity: 0; } 15%, 35% { opacity: 1; } 25% { opacity: .2; } }

:root[data-reduce-motion] .m-fx { display: none; }:root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }:root[data-reduce-motion] .m-float, :root[data-reduce-motion] .m-body, :root[data-reduce-motion] .m-shadow, :root[data-reduce-motion] .m-eyes, :root[data-reduce-motion] .m-arm, :root[data-reduce-motion] .m-eyes, :root[data-reduce-motion] .m-dots circle, :root[data-reduce-motion] .m-ring { animation: none !important; }:root[data-reduce-motion] .hero.intro .hero-copy { animation: none !important; }:root[data-reduce-motion] .m-thumb, :root[data-reduce-motion] .m-lines, :root[data-reduce-motion] .m-screenglow, :root[data-reduce-motion] .m-zzz text, :root[data-reduce-motion] .m-eye, :root[data-reduce-motion] .mascot[data-bounce] .m-enter, :root[data-reduce-motion] .bubble-line.swap-in { animation: none !important; }:root[data-reduce-motion] .cloud-bubble[class*="fx-"], :root[data-reduce-motion] .tool-tile, :root[data-reduce-motion] .tool-chip, :root[data-reduce-motion] .message.enter, :root[data-reduce-motion] .message.enter .bubble, :root[data-reduce-motion] .agent-step, :root[data-reduce-motion] .agent-step .as-ico { animation: none !important; }


/* Agente: vista simple */
.agent-run { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.08)); font-size: 13px; }
.agent-run .ar-head { display: flex; align-items: center; gap: 8px; color: var(--text, inherit); }
.agent-run .ar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #7c5cff); animation: arPulse 1.2s ease-in-out infinite; flex: none; }
.agent-run.done .ar-dot { animation: none; background: #22c55e; }
.agent-run .ar-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-run .ar-more summary { cursor: pointer; margin-top: 4px; font-size: 12px; opacity: .6; list-style: none; }
.agent-run .ar-more summary::-webkit-details-marker { display: none; }
.agent-run .ar-list { margin: 6px 0 0; padding-left: 18px; font-size: 12px; opacity: .8; display: grid; gap: 2px; }
.agent-run .ar-list li[data-state="err"] { color: #ef4444; }
@keyframes arPulse { 50% { opacity: .35; } }
:root[data-reduce-motion] .agent-run .ar-dot { animation: none; }