/* chat.raritos.club — tema rosa raritos, claro/oscuro. */
:root{
  --bg:#faf7f9; --panel:#ffffff; --panel-2:#fbf3f8; --border:#eadfe6; --text:#1f1620;
  --muted:#8a7c86; --pink:#ec4899; --pink-600:#db2777; --pink-50:#fdf2f8; --pink-ring:rgba(236,72,153,.35);
  --user-bg:#ec4899; --user-text:#ffffff; --ai-bg:#f4eef2; --ai-text:#241a22; --shadow:0 1px 2px rgba(0,0,0,.05);
}
[data-theme="dark"]{
  --bg:#120c11; --panel:#1b141a; --panel-2:#211823; --border:#2c2230; --text:#f3eaf0;
  --muted:#9c8e98; --pink:#ec4899; --pink-600:#f472b6; --pink-50:#2a1622; --pink-ring:rgba(236,72,153,.4);
  --user-bg:#db2777; --user-text:#ffffff; --ai-bg:#221a26; --ai-text:#ece2e9; --shadow:0 1px 2px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* gana sobre .welcome{display:flex} y .msgs */
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
a{color:var(--pink-600);text-decoration:none}

/* ── Layout ── */
.app{display:flex;height:100dvh;overflow:hidden}
.sidebar{width:264px;flex-shrink:0;background:var(--panel-2);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform .22s ease}
.sidebar-head{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--pink-600)}
.brand svg{flex:none}
.new-btn{margin:6px 12px 10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--pink);color:#fff;font-weight:600}
.new-btn:hover{background:var(--pink-600)}
.conv-list{flex:1;overflow-y:auto;padding:0 8px 12px}
.conv{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;color:var(--text);cursor:pointer;margin-bottom:2px}
.conv:hover{background:var(--pink-50)}
.conv.active{background:var(--pink-50);box-shadow:inset 0 0 0 1px var(--border)}
.conv .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.conv .del{flex:none;opacity:0;color:var(--muted);border:none;background:none;padding:2px 4px;border-radius:6px;line-height:1}
.conv:hover .del{opacity:1}
.conv .del:hover{color:#fff;background:var(--pink-600)}
.sidebar-foot{padding:10px 12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.empty-convs{color:var(--muted);font-size:13px;font-style:italic;padding:14px 12px}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--panel)}
.menu-btn{display:none;border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:7px 9px;color:var(--text)}
.model-sel{flex:1;max-width:420px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--text);font-size:14px}
.model-sel:focus{outline:none;box-shadow:0 0 0 3px var(--pink-ring)}
.icon-btn{border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:7px 9px;color:var(--text);display:inline-flex}
.icon-btn:hover{background:var(--pink-50)}
.spacer{flex:1}

/* ── Mensajes ── */
.msgs{flex:1;overflow-y:auto;padding:22px 0}
.msgs-inner{max-width:760px;margin:0 auto;padding:0 18px;display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:flex-start}
.row.user{justify-content:flex-end}
.avatar{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--pink-50);color:var(--pink-600)}
.row.user .avatar{display:none}
.bubble{max-width:80%;padding:11px 14px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--shadow)}
.row.user .bubble{background:var(--user-bg);color:var(--user-text);border-bottom-right-radius:5px}
.row.ai .bubble{background:var(--ai-bg);color:var(--ai-text);border-bottom-left-radius:5px}
.bubble code{background:rgba(127,127,127,.18);padding:1px 5px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.bubble pre{background:rgba(127,127,127,.14);padding:10px 12px;border-radius:10px;overflow-x:auto;margin:8px 0}
.bubble pre code{background:none;padding:0}
.bubble .cursor{display:inline-block;width:7px;height:1.05em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2) infinite;border-radius:1px;opacity:.7}
@keyframes blink{50%{opacity:0}}

.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);gap:10px;padding:24px}
.welcome .logo{width:54px;height:54px;color:var(--pink)}
.welcome h2{margin:0;color:var(--text);font-size:20px}
.welcome p{margin:0;max-width:360px}
.notice-bar{margin:14px auto;max-width:560px;padding:12px 14px;border-radius:12px;background:var(--pink-50);color:var(--pink-600);border:1px solid var(--border);font-size:14px;text-align:center}

/* ── Redactor ── */
.composer{border-top:1px solid var(--border);background:var(--panel);padding:12px 0}
.composer-inner{max-width:760px;margin:0 auto;padding:0 18px;display:flex;gap:10px;align-items:flex-end}
.composer textarea{flex:1;resize:none;max-height:200px;min-height:24px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);font:inherit;line-height:1.45}
.composer textarea:focus{outline:none;box-shadow:0 0 0 3px var(--pink-ring)}
.send-btn{flex:none;width:44px;height:44px;border:none;border-radius:12px;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center}
.send-btn:hover{background:var(--pink-600)}
.send-btn:disabled{opacity:.45;cursor:default}
.hint{max-width:760px;margin:6px auto 0;padding:0 18px;color:var(--muted);font-size:11px}

/* ── Login ── */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:radial-gradient(1200px 600px at 50% -10%,var(--pink-50),var(--bg))}
.login-card{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:26px;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.login-logo{width:52px;height:52px;border-radius:14px;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.login-card h1{text-align:center;margin:0 0 2px;font-size:21px}
.login-card .sub{text-align:center;color:var(--muted);margin:0 0 18px;font-size:14px}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:11px;background:var(--bg);color:var(--text);font:inherit}
.field input:focus{outline:none;box-shadow:0 0 0 3px var(--pink-ring)}
.btn-pink{width:100%;border:none;border-radius:11px;background:var(--pink);color:#fff;font-weight:600;padding:12px;margin-top:4px}
.btn-pink:hover{background:var(--pink-600)}
.notice{min-height:18px;margin-top:12px;font-size:14px;text-align:center}
.notice.ok{color:#059669}
.notice.err{color:#dc2626}

/* ── Móvil ── */
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
@media (max-width:760px){
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:30;transform:translateX(-100%);box-shadow:0 0 40px rgba(0,0,0,.2)}
  .sidebar.open{transform:translateX(0)}
  .backdrop.show{display:block}
  .menu-btn{display:inline-flex}
  .bubble{max-width:88%}
}