/* Rainy — chat PWA. Paleta gris estilo Claude, bordes claros. */
:root{
  --bg:            #ebebed;   /* gris base */
  --surface:       #f3f3f4;   /* paneles */
  --surface-2:     #fafafa;   /* tarjetas / mensajes */
  --sidebar:       #e6e6e9;
  --border:        #ffffff;   /* bordes claros */
  --border-soft:   #d7d7db;
  --text:          #26262a;
  --text-soft:     #6b6b73;
  --muted:         #9a9aa2;
  --accent:        #2b2b2e;   /* casi negro, NO naranja */
  --accent-text:   #ffffff;
  --bubble-user:   #dfdfe4;
  --shadow:        0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.18);
  --radius:        16px;
  --radius-sm:     11px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1c1c1f; --surface:#26262a; --surface-2:#2d2d31; --sidebar:#202023;
    --border:#3a3a40; --border-soft:#34343a; --text:#ececee; --text-soft:#a9a9b2;
    --muted:#76767e; --accent:#ececee; --accent-text:#1c1c1f; --bubble-user:#34343b;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  font-size:15px; line-height:1.55;
}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Brand mark ── */
.brand-mark{
  display:grid;place-items:center; width:56px;height:56px;border-radius:18px;
  background:var(--accent); color:var(--accent-text);
  font-weight:700;font-size:26px; border:2px solid var(--border);
  box-shadow:var(--shadow); margin:0 auto;
}
.brand-mark.sm{width:30px;height:30px;border-radius:10px;font-size:15px;border-width:1.5px;margin:0}

/* ── Login ── */
.login{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);padding:24px;z-index:50}
.login-card{
  width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);
  border-radius:24px;padding:34px 26px;text-align:center;box-shadow:var(--shadow-lg);
}
.login-card h1{font-size:26px;margin:16px 0 4px;letter-spacing:-.02em}
.login-card .muted{color:var(--muted);font-size:14px;margin-bottom:22px}
.login-card input{
  width:100%;padding:13px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);
  background:var(--surface-2);color:var(--text);font-size:15px;outline:none;margin-bottom:12px;
}
.login-card input:focus{border-color:var(--accent)}
.primary{
  width:100%;padding:13px;border-radius:var(--radius-sm);background:var(--accent);
  color:var(--accent-text);font-weight:600;font-size:15px;transition:opacity .15s;
}
.primary:active{opacity:.85}
.login-err{color:#d04545;font-size:13px;margin-top:10px;min-height:16px}

/* ── App shell ── */
.app{display:flex;height:100%;width:100%}

/* ── Sidebar ── */
.sidebar{
  width:272px;flex-shrink:0;background:var(--sidebar);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:12px;gap:10px;transition:transform .25s ease;z-index:30;
}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px}
.logo{display:flex;align-items:center;gap:10px}
.logo-text{font-weight:650;font-size:17px;letter-spacing:-.01em}
.icon-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--text-soft);transition:background .15s}
.icon-btn:hover{background:rgba(0,0,0,.06)}
#closeSidebar{display:none}

.new-chat{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);
  font-weight:550;font-size:14.5px;transition:transform .12s, background .15s;
}
.new-chat:hover{background:#fff}
.new-chat:active{transform:scale(.98)}
@media (prefers-color-scheme:dark){.new-chat:hover{background:#33333a}}

.chat-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-top:4px}
.chat-list::-webkit-scrollbar{width:6px}
.chat-list::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:3px}
.chat-item{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;
  font-size:14px;color:var(--text-soft);cursor:pointer;transition:background .12s;
  border:1px solid transparent;
}
.chat-item:hover{background:rgba(0,0,0,.05)}
.chat-item.active{background:var(--surface-2);color:var(--text);border-color:var(--border);box-shadow:var(--shadow)}
.chat-item .title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .del{opacity:0;transition:opacity .12s;color:var(--muted)}
.chat-item:hover .del{opacity:1}
.chat-item .del svg{width:16px;height:16px}

.sidebar-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 2px;border-top:1px solid var(--border-soft)}
.user-pill{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-soft);padding:6px 10px;border-radius:10px}
.user-pill .dot{width:8px;height:8px;border-radius:50%;background:#3fae6b;box-shadow:0 0 0 3px rgba(63,174,107,.15)}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 14px;height:56px;flex-shrink:0;
  border-bottom:1px solid var(--border-soft);background:var(--surface);
}
.topbar-title{flex:1;font-weight:600;font-size:15.5px;text-align:center}
#openSidebar,#topNewChat{flex-shrink:0}

.messages{flex:1;overflow-y:auto;padding:24px 0;scroll-behavior:smooth}
.messages::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:4px}

.row{max-width:720px;margin:0 auto;padding:8px 20px;display:flex;gap:14px}
.row.user{justify-content:flex-end}
.bubble{
  padding:12px 16px;border-radius:var(--radius);font-size:15px;line-height:1.6;
  white-space:pre-wrap;word-wrap:break-word;
}
.row.user .bubble{background:var(--bubble-user);border:1px solid var(--border);border-bottom-right-radius:5px;max-width:80%}
.row.bot{align-items:flex-start}
.avatar{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-weight:700;font-size:14px;border:1.5px solid var(--border)}
.row.bot .bubble{background:var(--surface-2);border:1px solid var(--border);border-top-left-radius:5px;box-shadow:var(--shadow);flex:1}

/* typing */
.typing{display:flex;gap:5px;padding:4px 2px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.3s infinite both}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* empty state */
.empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:20px;color:var(--text-soft)}
.empty .brand-mark{width:64px;height:64px;border-radius:20px;font-size:30px}
.empty h2{font-size:24px;color:var(--text);font-weight:600;letter-spacing:-.02em}
.empty .suggestions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;margin-top:6px}
.suggestion{padding:10px 15px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow);font-size:13.5px;color:var(--text);transition:transform .12s}
.suggestion:hover{transform:translateY(-2px)}

/* ── Composer ── */
.composer-wrap{padding:10px 16px 18px;flex-shrink:0}
.composer{
  max-width:720px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:24px;
  padding:8px 8px 8px 18px;box-shadow:var(--shadow-lg);
}
.composer textarea{
  flex:1;border:none;outline:none;resize:none;background:transparent;color:var(--text);
  font-family:inherit;font-size:15.5px;line-height:1.5;max-height:160px;padding:7px 0;
}
.composer textarea::placeholder{color:var(--muted)}
.send{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-text);
  display:grid;place-items:center;transition:transform .12s, opacity .15s;
}
.send:disabled{opacity:.35;cursor:default}
.send:not(:disabled):active{transform:scale(.9)}
.mic{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border-soft);color:var(--text-soft);display:grid;place-items:center;transition:background .15s,color .15s,transform .12s}
.mic:hover{background:var(--bubble-user);color:var(--text)}
.mic:active{transform:scale(.9)}
.mic.activo{background:rgba(208,69,69,.16);color:#d04545;border-color:rgba(208,69,69,.4);animation:micPulse 1.1s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(208,69,69,.35)}50%{box-shadow:0 0 0 6px rgba(208,69,69,0)}}
.send.sending{opacity:.55}
.disclaimer{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px}

/* ── Modo voz (overlay) ── */
.voice-overlay{
  position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;gap:34px;
  background:var(--bg);
}
.voice-overlay.open{display:flex}
.voice-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--text-soft);background:var(--surface);border:1px solid var(--border-soft)}
.voice-close:hover{color:var(--text)}
.orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:200px;height:200px}
.orb-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(120,120,130,.45),rgba(120,120,130,.12) 60%,transparent 75%);filter:blur(8px);animation:orbGlow 2.6s ease-in-out infinite}
@media (prefers-color-scheme:dark){.orb-glow{background:radial-gradient(circle,rgba(220,220,230,.35),rgba(180,180,190,.1) 60%,transparent 75%)}}
.orb-wrap.hablando .orb-glow{animation:orbGlow 1s ease-in-out infinite}
.orb-wrap.cargando .orb-glow{animation:orbGlow 1.6s ease-in-out infinite;opacity:.6}
.orb{
  position:relative;width:104px;height:104px;border-radius:32px;background:var(--accent);color:var(--accent-text);
  display:grid;place-items:center;font-size:46px;font-weight:700;border:2px solid var(--border);
  box-shadow:var(--shadow-lg);animation:orbFloat 3.2s ease-in-out infinite;
}
.orb-wrap.hablando .orb{animation:orbFloat 3.2s ease-in-out infinite, orbTalk .5s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes orbGlow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.22);opacity:.9}}
@keyframes orbTalk{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.voice-status{font-size:16px;color:var(--text-soft);min-height:20px;transition:opacity .4s ease;text-align:center;padding:0 24px}
.voice-end{
  display:flex;align-items:center;gap:8px;padding:13px 26px;border-radius:30px;font-size:15px;font-weight:600;
  background:#d04545;color:#fff;box-shadow:var(--shadow-lg);transition:transform .12s,filter .15s;
}
.voice-end svg{width:18px;height:18px;fill:#fff;stroke:none}
.voice-end:hover{filter:brightness(1.08)}
.voice-end:active{transform:scale(.96)}

/* ── Mobile ── */
@media (max-width:820px){
  .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  #closeSidebar{display:grid}
  .scrim.show{display:block}
}
@media (min-width:821px){
  #openSidebar{display:none}
  .topbar{justify-content:flex-start}
  .topbar-title{text-align:left;padding-left:4px}
}