@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Manrope:wght@500;600;700;800&display=swap');

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #EEF0FA;
  font-family: 'Manrope', sans-serif;
  color: #0A0E27;
}
button { font: inherit; border: none; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }
a { color: inherit; text-decoration: none; }

.lc-shell {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(10,14,39,0.08);
}

/* ---------- Splash ---------- */
#lcSplash {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background:
    radial-gradient(900px 700px at 50% 15%, rgba(255,60,172,0.30), rgba(10,14,39,0) 60%),
    radial-gradient(700px 600px at 88% 95%, rgba(255,107,53,0.22), rgba(10,14,39,0) 60%),
    #0A0E27;
  padding: 40px;
}
.lc-logo-ring {
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg,#2F6FED,#8A3FD1 40%,#FF3CAC 72%,#FF6B35);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(255,60,172,0.35);
}
.lc-logo-ring span {
  width: 76px; height: 76px; border-radius: 50%; background: #0A0E27;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lc-logo-ring i { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: inline-block; }
.lc-wordmark {
  margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -1px;
  background: linear-gradient(90deg,#4F8CFD,#B06AF2 40%,#FF5FC0 70%,#FF8A5B);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.lc-tag { font-size: 14px; font-weight: 600; color: #C7CCE8; }

/* ---------- Login ---------- */
#lcLogin {
  position: absolute; inset: 0; z-index: 4; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #0A0E27; padding: 40px;
}
.lc-login-card { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 14px; }
.lc-login-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: #fff; text-align: center; }
.lc-login-sub { font-size: 14px; color: #9BA3C7; text-align: center; margin-bottom: 8px; }
.lc-input {
  width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid #2A3156;
  background: #121833; color: #fff; font-size: 14px;
}
.lc-input::placeholder { color: #6B7094; }
.lc-btn-primary {
  margin-top: 6px; padding: 14px; border-radius: 999px; text-align: center;
  background: linear-gradient(90deg,#2F6FED,#FF3CAC 60%,#FF6B35); color: #fff; font-weight: 800; font-size: 15px;
}
.lc-login-error { color: #FF8A8A; font-size: 13px; text-align: center; min-height: 16px; }
.lc-login-link { font-size: 13px; color: #9BA3C7; text-align: center; }
.lc-login-link a { color: #FF3CAC; font-weight: 700; }

/* ---------- App shell ---------- */
#lcApp { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; }

/* top bar */
.lc-topbar { flex-shrink: 0; padding: 16px 16px 8px 16px; display: flex; align-items: center; justify-content: space-between; }
.lc-icon-btn { width: 38px; height: 38px; border-radius: 12px; background: #F4F5FA; display: flex; align-items: center; justify-content: center; }
.lc-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px;
  background: linear-gradient(90deg,#2F6FED,#8A3FD1 45%,#FF3CAC 80%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.lc-avatar-btn { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#2F6FED,#FF3CAC); display: flex; align-items: center; justify-content: center; }
.lc-avatar-btn > span { width: 32px; height: 32px; border-radius: 50%; background: #0A0E27; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lc-avatar-btn img, .lc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* chat list view */
#lcChatListView { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lc-conversations { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 10px 10px; }
.lc-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 8px; border-radius: 16px; text-align: left; }
.lc-row:hover { background: #F8F9FD; }
.lc-avatar { position: relative; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 16px; flex-shrink: 0; overflow: hidden; }
.lc-avatar.lc-online::after, .lc-chat-avatar.lc-online::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px;
  border-radius: 50%; background: #22C55E; border: 2px solid #fff;
}
.lc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-row-name { font-size: 15px; font-weight: 700; color: #0A0E27; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row-preview { font-size: 13px; font-weight: 500; color: #6B7094; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.lc-row-time { font-size: 11px; font-weight: 600; color: #9BA3C7; }
.lc-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #2F6FED; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.lc-empty { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 30px; text-align: center; color: #9BA3C7; }
.lc-empty b { color: #0A0E27; }

/* chat view */
#lcChatView { position: absolute; inset: 0; display: none; flex-direction: column; background: #fff; z-index: 2; }
.lc-chat-header { flex-shrink: 0; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #EEF0FA; }
.lc-chat-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-chat-title-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; }
.lc-chat-name { font-size: 15px; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chat-status { font-size: 12px; font-weight: 600; color: #9BA3C7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-chat-status.lc-online { color: #22C55E; }
.lc-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #FBFBFE; }
.lc-msg-row { display: flex; flex-direction: column; gap: 4px; max-width: 78%; align-self: flex-start; }
.lc-msg-row.lc-mine { align-self: flex-end; align-items: flex-end; }
.lc-bubble { padding: 11px 14px; border-radius: 18px 18px 18px 4px; font-size: 14px; font-weight: 500; line-height: 1.4; }
.lc-bubble-other { background: #F1F2F8; color: #0A0E27; }
.lc-bubble-mine { background: linear-gradient(135deg,#2F6FED,#4C6EF5); color: #fff; border-radius: 18px 18px 4px 18px; }
.lc-msg-time { font-size: 11px; color: #9BA3C7; padding: 0 4px; }

.lc-input-bar { flex-shrink: 0; padding: 10px 12px; border-top: 1px solid #EEF0FA; display: flex; align-items: center; gap: 8px; background: #fff; }
.lc-draft { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; background: #F4F5FA; border: 1px solid #EEF0FA; font-size: 14px; color: #0A0E27; }
.lc-send-btn { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg,#2F6FED,#FF3CAC); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-input-icon-btn { width: 40px; height: 40px; border-radius: 50%; color: #6B7094; flex-shrink: 0; transition: background .15s, color .15s; }
#lcMicBtn.lc-recording { background: #FF3CAC; color: #fff; }
.lc-recording-bar { display: none; flex: 1; min-width: 0; align-items: center; gap: 9px; padding: 0 4px; }
.lc-recording-bar.lc-active { display: flex; }
.lc-recording-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3CAC; flex-shrink: 0; animation: lc-pulse 1.1s infinite; }
.lc-recording-time { font-size: 14px; font-weight: 800; color: #0A0E27; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lc-recording-hint { font-size: 13px; font-weight: 600; color: #9BA3C7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes lc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* mensajes multimedia */
.lc-bubble.lc-bubble-media { padding: 3px; background: transparent; }
.lc-msg-photo { display: block; max-width: 220px; max-height: 280px; width: 100%; border-radius: 15px; object-fit: cover; }
.lc-msg-audio { width: 230px; max-width: 70vw; }

/* side menu */
#lcMenuOverlay { position: absolute; inset: 0; background: rgba(10,14,39,0.4); z-index: 8; opacity: 0; pointer-events: none; transition: opacity .2s; }
#lcMenuOverlay.lc-open { opacity: 1; pointer-events: auto; }
#lcMenu { position: absolute; top: 0; bottom: 0; left: 0; width: 82%; max-width: 340px; background: #fff; z-index: 9;
  transform: translateX(-100%); transition: transform .22s ease; display: flex; flex-direction: column; }
#lcMenu.lc-open { transform: translateX(0); }
.lc-menu-header { flex-shrink: 0; padding: 26px 20px 22px 20px; background: linear-gradient(135deg,#2F6FED,#8A3FD1 55%,#FF3CAC 100%); display: flex; align-items: center; justify-content: space-between; }
.lc-menu-profile { display: flex; align-items: center; gap: 14px; }
.lc-menu-avatar { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 2px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; overflow: hidden; }
.lc-menu-name { font-size: 16px; font-weight: 800; color: #fff; }
.lc-menu-list { flex: 1; overflow-y: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.lc-menu-item { display: flex; align-items: center; gap: 14px; padding: 13px 10px; border-radius: 14px; width: 100%; text-align: left; }
.lc-menu-item-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-menu-item-label { flex: 1; font-size: 15px; font-weight: 700; }
.lc-menu-footer { flex-shrink: 0; padding: 14px; text-align: center; font-size: 12px; font-weight: 600; color: #C7CCE8; }

@media (max-width: 480px) {
  .lc-shell { box-shadow: none; }
}