/* Chat template con animaciones y efectos modernos */
:root{
  /* tonos claros con acento verde */
  --bg1: #f2f2f2; /* gris muy claro */
  --bg2: #e0e0e0; /* gris claro secundario */
  --card: rgba(255,255,255,0.9); /* casi totalmente blanco */
  --accent: #16a34a; /* verde brillante */
  --glass: rgba(255,255,255,0.6);
  --text: #333333; /* texto gris oscuro para contraste */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:var(--text);background:linear-gradient(180deg,var(--bg1),#001f2d);}
.bg-anim{position:fixed;inset:0;background:linear-gradient(120deg, rgba(22,163,74,0.08), rgba(134,239,172,0.08));pointer-events:none;z-index:0;overflow:hidden}
.bg-anim:before,.bg-anim:after{content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(80px);transform:translate(-10%, -20%);opacity:0.8}
.bg-anim:before{left:-10%;top:-20%;background:radial-gradient(circle at 30% 30%, #16a34a, transparent 40%)}
.bg-anim:after{right:-20%;bottom:-10%;background:radial-gradient(circle at 70% 70%, #a7f3d0, transparent 30%)}

.chat-app{position:relative;z-index:1;max-width:980px;margin:48px auto;padding:20px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(240,240,240,0.8));box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.03)}
.brand{display:flex;gap:12px;align-items:center}
.brand h1{font-size:20px;margin:0}
.brand p{margin:0;font-size:12px;opacity:0.8}
.brand-title-img{height:92px;object-fit:contain;border-radius:6px;margin-left:-6mm /*≈0.5cm to the right from previous*/}
.logo{width:48px;height:48px;object-fit:contain;border-radius:8px;transform-origin:center;animation:robot-wiggle 5s ease-in-out infinite}
@keyframes robot-wiggle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.controls button{background:transparent;border:0;color:var(--text);font-size:18px;cursor:pointer}

.chat-window{display:flex;flex-direction:column;height:60vh;min-height:420px}
.messages{flex:1;padding:24px;overflow:auto;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:75%;opacity:0;transform:translateY(18px);animation:msg-in 420ms cubic-bezier(.2,.9,.2,1) forwards}
@keyframes msg-in{to{opacity:1;transform:none}}
.msg .bubble{padding:12px 14px;border-radius:14px;background:var(--glass);backdrop-filter: blur(6px);box-shadow: 0 6px 20px rgba(0,0,0,0.6);}
.msg-user{align-self:flex-end;flex-direction:row-reverse}
.msg-user .bubble{background:linear-gradient(135deg,var(--accent),#059669);color:#062514}
.msg-assistant{align-self:flex-start}
.msg-assistant .avatar{width:48px;height:48px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#064e3b,var(--accent));overflow:hidden}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.msg time{display:block;font-size:11px;opacity:0.6;margin-top:6px}
.typing{display:none;padding:0 24px 12px 24px}
.typing .dot{display:inline-block;width:8px;height:8px;margin-right:6px;background:var(--accent);border-radius:50%;opacity:0.8;animation:blink 1s infinite}
.typing .dot:nth-child(2){animation-delay:0.12s}
.typing .dot:nth-child(3){animation-delay:0.24s}
@keyframes blink{0%{transform:translateY(0);opacity:.3}50%{transform:translateY(-6px);opacity:1}100%{transform:translateY(0);opacity:.3}}

.composer{display:flex;gap:10px;padding:12px;border-top:1px solid rgba(255,255,255,0.03);align-items:center}
.composer input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text);outline:none}
.composer .send{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 8px 20px rgba(6,182,212,0.12);}
.composer .micro{background:transparent;border:0;color:var(--text);font-size:18px}

/* floating glow */
.glow{position:absolute;inset:0;pointer-events:none}

/* responsive */
@media (max-width:600px){
  /* make container use most of the viewport and allow internal scrolling */
  .chat-app{margin:8px;border-radius:12px;height:calc(100vh - 16px);display:flex;flex-direction:column;overflow:visible;padding:12px}
  .robot{width:36px;height:36px}
  .messages{padding:12px}
  .msg-assistant .avatar{width:40px;height:40px}
  /* reduce brand image and remove negative margin on phones */
  .brand-title-img{height:54px;margin-left:0;max-width:60%}
  /* allow header elements to wrap if necessary and keep composer fixed at bottom */
  .chat-header{flex-wrap:wrap;justify-content:space-between}
  .chat-header .controls{margin-top:8px}

  /* make the chat window flexible so composer stays visible */
  .chat-window{flex:1;display:flex;flex-direction:column;min-height:0;height:auto}
  .messages{flex:1;overflow:auto}

  /* ensure bubbles wrap and do not overflow the viewport */
  .msg{max-width:100%}
  .msg .bubble{word-break:break-word;white-space:normal}

  /* composer sticks to bottom and doesn't get cropped */
  .composer{flex-shrink:0}
}

/* dark toggle state */
:root.dark{--bg1:#020617;--bg2:#001219;--card:#071021cc;--glass:rgba(255,255,255,0.03);--text:#eafafc}

/* small interactions */
.send:active{transform:translateY(1px);opacity:0.9}