/* ========== RESET & BASE ========== */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
  background:#0a0a0f;
  color:#e1e4e8;
  min-height:100vh;
}
a{color:#58a6ff;text-decoration:none}
a:hover{text-decoration:underline}

/* ========== LOGIN ========== */
.login-screen{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
}
.login-box{
  background:#12121a;border:1px solid #1e1e2a;border-radius:16px;
  padding:40px;width:100%;max-width:400px;
}
.login-box h1{
  font-size:1.5rem;margin-bottom:4px;color:#fff;
}
.login-box .sub{
  color:#6b6b80;font-size:.85rem;margin-bottom:24px;
}
.input-group{margin-bottom:16px}
.input-group label{display:block;font-size:.82rem;color:#8b8ba0;margin-bottom:6px}
.input-group input{
  width:100%;padding:10px 14px;background:#181825;border:1px solid #2a2a3a;
  border-radius:8px;color:#e1e4e8;font-size:.9rem;outline:none;
  transition:border-color .2s;
}
.input-group input:focus{border-color:#58a6ff}
.input-group input::placeholder{color:#4a4a5a}
.btn-primary{
  width:100%;padding:12px;background:#1f6feb;color:#fff;border:none;
  border-radius:8px;font-size:1rem;cursor:pointer;transition:background .2s;
}
.btn-primary:hover{background:#388bfd}
.btn-primary:disabled{opacity:.5;cursor:wait}
.error{color:#f85149;font-size:.82rem;margin-top:8px;display:none}
.error.show{display:block}
.switch{margin-top:16px;text-align:center;font-size:.85rem;color:#6b6b80}
.switch a{cursor:pointer}

/* ========== DASHBOARD ========== */
.dashboard{padding:24px;max-width:1200px;margin:0 auto}
.dash-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:32px;flex-wrap:wrap;gap:12px;
}
.dash-header h1{font-size:1.3rem;color:#fff}
.dash-header .user-info{font-size:.82rem;color:#6b6b80}
.logout-btn{
  padding:6px 16px;background:#2a2a3a;border:1px solid #3a3a4a;
  border-radius:6px;color:#e1e4e8;cursor:pointer;font-size:.82rem;
}
.logout-btn:hover{background:#3a3a4a}
.vps-card{
  background:#12121a;border:1px solid #1e1e2a;border-radius:12px;
  padding:20px;margin-bottom:16px;
}
.vps-card h3{color:#fff;font-size:1rem;margin-bottom:8px}
.vps-card .status{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.75rem}
.vps-card .status.active{background:#0c2d1e;color:#3fb950}
.vps-card .status.inactive{background:#2d0c0c;color:#f85149}
.agent-btn{
  display:inline-block;margin-top:12px;padding:10px 24px;
  background:#1f6feb;color:#fff;border:none;border-radius:8px;
  font-size:.9rem;cursor:pointer;transition:background .2s;
}
.agent-btn:hover{background:#388bfd}

/* ========== CHAT ========== */
.chat-screen{
  display:flex;flex-direction:column;height:100vh;background:#0a0a0f;
}
.chat-header{
  padding:14px 20px;background:#12121a;border-bottom:1px solid #1e1e2a;
  display:flex;align-items:center;gap:12px;
}
.chat-header .back-btn{
  background:none;border:none;color:#6b6b80;cursor:pointer;font-size:1.2rem;
  padding:4px 8px;border-radius:6px;
}
.chat-header .back-btn:hover{background:#1e1e2a;color:#e1e4e8}
.chat-header h2{font-size:1rem;color:#fff;flex:1}
.chat-header .model-badge{
  font-size:.7rem;background:#1e1e2a;color:#6b6b80;
  padding:3px 10px;border-radius:10px;
}
.chat-messages{
  flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;
}
.msg{max-width:80%;padding:12px 16px;border-radius:12px;font-size:.9rem;line-height:1.5}
.msg.user{background:#1f6feb;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg.assistant{background:#181825;color:#e1e4e8;align-self:flex-start;border-bottom-left-radius:4px;border:1px solid #2a2a3a}
.msg .thinking-toggle{
  display:block;font-size:.75rem;color:#6b6b80;cursor:pointer;margin-top:6px;
}
.msg .thinking-content{
  display:none;font-size:.78rem;color:#8b8ba0;margin-top:8px;
  padding:8px 12px;background:#0d0d14;border-radius:8px;
  border-left:2px solid #58a6ff;white-space:pre-wrap;
}
.msg .thinking-content.show{display:block}
.chat-input-area{
  padding:14px 20px;background:#12121a;border-top:1px solid #1e1e2a;
  display:flex;gap:10px;
}
.chat-input-area input{
  flex:1;padding:10px 14px;background:#181825;border:1px solid #2a2a3a;
  border-radius:8px;color:#e1e4e8;font-size:.9rem;outline:none;
}
.chat-input-area input:focus{border-color:#58a6ff}
.chat-input-area .send-btn{
  padding:10px 20px;background:#1f6feb;color:#fff;border:none;
  border-radius:8px;cursor:pointer;font-size:.9rem;
}
.chat-input-area .send-btn:hover{background:#388bfd}
.chat-input-area .send-btn:disabled{opacity:.5;cursor:wait}
.typing{color:#6b6b80;font-size:.82rem;padding:8px 16px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.doc-btn{
  padding:10px 14px;background:#181825;border:1px solid #2a2a3a;
  border-radius:8px;color:#6b6b80;cursor:pointer;font-size:.9rem;
}
.doc-btn:hover{background:#2a2a3a;color:#e1e4e8}

/* ========== REGISTER ========== */
.register-extra{font-size:.78rem;color:#6b6b80;margin-top:4px}

/* ========== NAV + STORE + ADMIN (Fase 2) ========== */
.nav-link{
  padding:8px 14px;background:#181825;border:1px solid #2a2a3a;
  border-radius:8px;color:#e1e4e8;text-decoration:none;font-size:.85rem;
}
.nav-link:hover{background:#2a2a3a;border-color:#58a6ff}
.store-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin-bottom:8px;
}
.store-card{
  background:#12121a;border:1px solid #1e1e2a;border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:8px;
}
.store-card:hover{border-color:#2a2a3a}
.store-name{font-size:1.05rem;font-weight:600;color:#fff}
.store-price{font-size:1.5rem;font-weight:700;color:#58a6ff}
.store-price span{font-size:.75rem;color:#6b6b80;font-weight:400}
.store-desc{font-size:.8rem;color:#8b8ba0;flex:1;line-height:1.4}
.buy-btn{
  padding:10px;background:#1f6feb;color:#fff;border:none;
  border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600;
}
.buy-btn:hover{background:#388bfd}
.admin-table{
  width:100%;border-collapse:collapse;background:#12121a;
  border-radius:12px;overflow:hidden;font-size:.82rem;
}
.admin-table th{
  text-align:left;padding:12px 14px;background:#181825;
  color:#8b8ba0;text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;
}
.admin-table td{padding:10px 14px;border-top:1px solid #1e1e2a;color:#e1e4e8}
.admin-table tr:hover td{background:#161622}
.admin-table small{color:#6b6b80}

/* ========== AUTH EXTRA (Fase 2.5) ========== */
.verify-badge{
  display:inline-block;margin-left:8px;padding:2px 10px;background:#3a2a00;
  color:#ffb020;border-radius:6px;font-size:.7rem;cursor:pointer;
}
.verify-badge:hover{background:#4a3800}
.modal{
  background:#12121a;border:1px solid #2a2a3a;border-radius:14px;
  padding:28px;width:min(400px,90vw);max-height:90vh;overflow:auto;
}
.modal .input-group{margin-bottom:12px}
.modal .error{display:none;color:#f85149;font-size:.8rem;margin-bottom:10px}
.modal .error.show{display:block}
.store-setup{
  font-size:.72rem;color:#8b8ba0;background:#0d0d14;
  border:1px dashed #2a2a3a;border-radius:6px;padding:6px 10px;
}

/* ========== APPS PANEL (lo que construyó el agente) ========== */
.apps-panel{
  margin:0 20px 12px;background:#0d0d14;border:1px solid #1e1e2a;
  border-radius:10px;overflow:hidden;
}
.apps-header{
  padding:10px 14px;font-size:.8rem;color:#58a6ff;cursor:pointer;
  font-weight:600;user-select:none;
}
.apps-list{padding:0 14px 12px;display:flex;flex-direction:column;gap:8px}
.app-item{
  background:#12121a;border:1px solid #1e1e2a;border-radius:8px;padding:10px 12px;
}
.app-link{
  color:#58a6ff;text-decoration:none;font-size:.75rem;font-weight:600;
}
.app-link:hover{text-decoration:underline}
.apps-panel.collapsed .apps-list{display:none}

/* ========== CHAT LAYOUT con SIDEBAR (estilo OpenClaw) ========== */
.chat-layout{
  display:flex;height:100vh;height:100dvh;background:#0d0d14;
}
.chat-sidebar{
  width:280px;min-width:280px;background:#0a0a10;
  border-right:1px solid #1e1e2a;display:flex;flex-direction:column;
  overflow-y:auto;
}
.sidebar-header{
  padding:16px 16px 4px;display:flex;justify-content:space-between;align-items:center;
}
.sidebar-sub{
  padding:0 16px 12px;font-size:.72rem;color:#6b6b80;
  border-bottom:1px solid #1e1e2a;
}
.sidebar-refresh{
  background:#181825;border:1px solid #2a2a3a;color:#8b8ba0;
  border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:.85rem;
}
.sidebar-refresh:hover{background:#2a2a3a;color:#fff}
.apps-sidebar-list{
  flex:1;padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;
}
.app-side-item{
  background:#12121a;border:1px solid #1e1e2a;border-radius:10px;
  padding:10px 12px;
}
.app-side-item:hover{border-color:#58a6ff}
.sidebar-empty{
  color:#6b6b80;font-size:.8rem;text-align:center;padding:24px 12px;line-height:1.5;
}
.sidebar-footer{
  padding:12px;border-top:1px solid #1e1e2a;
}
.chat-main{
  flex:1;display:flex;flex-direction:column;min-width:0;
}
.chat-main .chat-header{
  padding:14px 20px;background:#12121a;border-bottom:1px solid #1e1e2a;
  display:flex;align-items:center;gap:12px;
}
.chat-main .chat-header h2{font-size:1rem;margin:0;color:#fff;flex:1}
.chat-main .chat-messages{
  flex:1;overflow-y:auto;padding:20px;
}
/* Móvil: sidebar colapsado a overlay */
@media (max-width: 768px){
  .chat-layout{position:relative}
  .chat-sidebar{
    position:absolute;left:-100%;top:0;bottom:0;z-index:50;
    transition:left .25s ease;
  }
  .chat-layout.sidebar-open .chat-sidebar{left:0}
}

/* ========== MENÚ FLOTANTE MÓVIL (chat) ========== */
.menu-fab{
  display:none;position:fixed;top:12px;left:12px;z-index:60;
  width:42px;height:42px;border-radius:10px;border:1px solid #2a2a3a;
  background:#181825;color:#e1e4e8;font-size:1.1rem;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.menu-fab:hover{background:#2a2a3a}
.sidebar-overlay{display:none}

@media (max-width: 768px){
  .menu-fab{display:block}
  .chat-main{position:relative}
  .sidebar-overlay{
    display:none;position:absolute;inset:0;background:rgba(0,0,0,.55);
    z-index:40;
  }
  .chat-layout.sidebar-open .sidebar-overlay{display:block}
  .chat-main .chat-header{padding-left:64px} /* espacio para el FAB */
}

/* ========== CLARIFY (el agente pregunta) ========== */
.clarify-box{
  background:#12121a;border:1px solid #58a6ff;border-radius:10px;
  padding:14px;margin:6px 0;
}
.clarify-q{color:#fff;font-size:.9rem;margin-bottom:10px;line-height:1.4}
.clarify-choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.clarify-choice{
  padding:8px 14px;background:#181825;border:1px solid #2a2a3a;color:#e1e4e8;
  border-radius:8px;cursor:pointer;font-size:.82rem;
}
.clarify-choice:hover{background:#2a2a3a;border-color:#58a6ff}
.clarify-input-row{display:flex;gap:8px}
.clarify-input-row input{
  flex:1;padding:8px 12px;background:#181825;border:1px solid #2a2a3a;
  border-radius:8px;color:#e1e4e8;font-size:.85rem;outline:none;
}
.clarify-input-row input:focus{border-color:#58a6ff}

/* ========== MARKDOWN en mensajes ========== */
.msg .md-table{
  width:100%;border-collapse:collapse;margin:10px 0;font-size:.82rem;
  background:#12121a;border-radius:8px;overflow:hidden;
}
.msg .md-table th{
  text-align:left;padding:8px 10px;background:#1e1e2a;color:#8b8ba0;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid #2a2a3a;
}
.msg .md-table td{padding:7px 10px;border-bottom:1px solid #1e1e2a;color:#e1e4e8}
.msg .md-table tr:last-child td{border-bottom:none}
.msg .md-code{
  background:#0d0d14;border:1px solid #2a2a3a;border-radius:8px;
  padding:10px 12px;overflow-x:auto;font-size:.78rem;margin:8px 0;
  font-family:'SF Mono',Consolas,monospace;white-space:pre-wrap;
}
.msg .md-inline{
  background:#0d0d14;border:1px solid #2a2a3a;border-radius:4px;
  padding:1px 5px;font-size:.8rem;font-family:'SF Mono',Consolas,monospace;
  color:#ffa657;
}
.msg .md-list{margin:8px 0;padding-left:20px}
.msg .md-list li{margin:3px 0}
.msg .md-h{margin:12px 0 6px;color:#fff}
.msg .response-content p{margin:6px 0}
.msg .response-content a{color:#58a6ff;text-decoration:none}
.msg .response-content a:hover{text-decoration:underline}
.msg .response-content strong{color:#fff}

/* ========== BOTÓN VOLVER MÓVIL (chat) ========== */
.back-btn-mobile{
  display:none;color:#e1e4e8;text-decoration:none;font-size:1.2rem;
  padding:4px 10px;border-radius:8px;background:#181825;border:1px solid #2a2a3a;
}
.back-btn-mobile:hover{background:#2a2a3a}
@media (max-width: 768px){
  .back-btn-mobile{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:12px;left:62px;z-index:60;
    width:42px;height:42px;border-radius:10px;
    background:#181825;border:1px solid #2a2a3a;
    text-decoration:none;
  }
  .chat-main .chat-header{padding-left:118px} /* espacio FAB + volver */
}

/* ========== BOTÓN STOP ========== */
.stop-btn{
  padding:10px 18px;background:#d73a49;color:#fff;border:none;
  border-radius:8px;cursor:pointer;font-size:.95rem;
}
.stop-btn:hover{background:#f85149}

.rag-btn{
  background:#181825;color:#c9d4e8;border:1px solid #2a2a3a;border-radius:8px;
  padding:8px 14px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
.rag-btn:hover{background:#1f6feb;border-color:#388bfd;color:#fff}
@media (max-width:640px){
  .rag-btn{font-size:.7rem;padding:6px 10px}
}