/* ==========================================================================
   MSN Messenger 7.5 / Windows XP & Vista Retro Theme
   Pixel-perfect recreación de MSN Messenger
   ========================================================================== */

:root {
  --msn-blue-bg: #eaf2fb;
  --msn-window-border: #7fa5d4;
  --msn-titlebar-start: #dbeaf9;
  --msn-titlebar-end: #b9d7f6;
  --msn-text-blue: #1b497e;
  --msn-input-border: #7f9db9;
  --msn-btn-border: #7da2ce;
  --msn-btn-bg-start: #f8fbfe;
  --msn-btn-bg-end: #d6e7f8;
  --msn-btn-hover-start: #ffffff;
  --msn-btn-hover-end: #e5f1fd;
  --msn-link-blue: #105cb6;
  --msn-selected-blue: #3399ff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: "Segoe UI", Tahoma, "MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  background: radial-gradient(circle at 50% 30%, #5a91d1 0%, #2a578f 100%);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  color: #000000;
}

/* ==========================================================================
   Marco de Ventana estilo Windows XP / Vista Aero
   ========================================================================== */
.msn-window {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--msn-window-border);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 8px 26px rgba(0, 20, 50, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Barra de Título */
.msn-titlebar {
  height: 30px;
  background: linear-gradient(180deg, #f2f7fc 0%, #d8e8f7 50%, #c4ddf4 51%, #d9ebf9 100%);
  border-bottom: 1px solid #9cbddf;
  padding: 0 6px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
}

.msn-titlebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #173b64;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.msn-titlebar-controls {
  display: flex;
  gap: 2px;
}

.msn-win-btn {
  width: 22px;
  height: 19px;
  border: 1px solid #84a5cb;
  border-radius: 3px;
  background: linear-gradient(180deg, #f7fbff 0%, #cfe3f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: bold;
  color: #2b507b;
  cursor: pointer;
}

.msn-win-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e0effe 100%);
  border-color: #5c8fc2;
}

.msn-win-btn.close:hover {
  background: linear-gradient(180deg, #f88b8b 0%, #e83333 100%);
  border-color: #9c1515;
  color: #ffffff;
}

/* Utilidades de visibilidad Móvil / Escritorio */
.mobile-only {
  display: none !important;
}
.desktop-only {
  display: flex !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: flex !important;
  }
  .desktop-only {
    display: none !important;
  }
}

/* Barra de Menú Clásica (Escritorio) */
.msn-menubar {
  height: 24px;
  background: linear-gradient(180deg, #fdfdfd 0%, #ebebeb 100%);
  border-bottom: 1px solid #dcdcdc;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.msn-menu-item {
  padding: 2px 7px;
  font-size: 11px;
  color: #222222;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

.msn-menu-item:hover {
  background: #cce4f7;
  border: 1px solid #99d1ff;
  padding: 1px 6px;
}

.msn-menu-wrapper {
  position: relative;
  display: inline-block;
}

.msn-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.28);
  z-index: 5000;
  min-width: 200px;
  padding: 3px 0;
  font-size: 11px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  border-radius: 2px;
  display: none;
}

.msn-dropdown-menu.show {
  display: block;
}

.msn-dropdown-item {
  padding: 5px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  white-space: nowrap;
  user-select: none;
  font-size: 11px;
}

.msn-dropdown-item:hover {
  background: #2b78e4;
  color: #ffffff;
}

.msn-dropdown-sub-header {
  font-size: 10px;
  font-weight: bold;
  color: #6d849f;
  padding: 4px 12px 2px 12px;
  user-select: none;
}

.msn-dropdown-divider {
  height: 1px;
  background: #e3e9ef;
  margin: 3px 0;
}

@media (max-width: 768px) {
  .msn-menubar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .msn-dropdown-menu {
    max-width: 85vw;
  }
  .msn-menu-wrapper:last-child .msn-dropdown-menu,
  .msn-menu-wrapper:nth-last-child(2) .msn-dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* ==========================================================================
   Ventana de Login EXACTA a la Imagen
   ========================================================================== */
.msn-login-card {
  position: absolute;
  width: 320px;
  max-width: 95vw;
  height: 485px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fd 70%, #e5f0fc 100%);
  overflow-y: auto;
}

.msn-brand-header {
  padding: 8px 12px 4px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Avatar Muñeco MSN en el Centro */
.msn-avatar-box-wrapper {
  display: flex;
  justify-content: center;
  padding: 4px 0 10px 0;
}

.msn-avatar-box {
  width: 102px;
  height: 102px;
  background: #ffffff;
  border: 1px solid #b7cce2;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px #ffffff inset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.msn-form-group {
  padding: 0 24px;
  margin-bottom: 9px;
}

.msn-label {
  display: block;
  font-size: 11px;
  color: #173b64;
  margin-bottom: 3px;
}

/* Inputs estilo Windows XP/Vista */
.msn-input-combobox {
  display: flex;
  position: relative;
}

.msn-input {
  width: 100%;
  height: 22px;
  padding: 2px 6px;
  border: 1px solid var(--msn-input-border);
  background: #ffffff;
  font-family: inherit;
  font-size: 12px;
  color: #000000;
  outline: none;
  border-radius: 2px;
  user-select: text;
}

.msn-input:focus {
  border-color: #3d80df;
  box-shadow: 0 0 3px rgba(61, 128, 223, 0.5);
}

.msn-combo-btn {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 18px;
  background: linear-gradient(180deg, #f6f9fd 0%, #d8e6f5 100%);
  border: none;
  border-left: 1px solid #b0c8e2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 8px;
  color: #3b587b;
}

/* Selector de Estado con Muñequito */
.msn-status-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--msn-input-border);
  height: 22px;
  padding: 0 6px;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
}

.msn-status-select-btn span.label {
  flex: 1;
  font-size: 11px;
  color: #000;
  text-align: left;
}

/* Desplegable de Estados exactamente como en la foto */
.msn-status-menu-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  display: none;
  margin-top: 1px;
  border-radius: 2px;
}

.msn-status-menu-popup.show {
  display: block;
}

.msn-status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 11px;
  color: #000000;
}

.msn-status-item:hover,
.msn-status-item.active {
  background-color: var(--msn-selected-blue);
  color: #ffffff;
}

.msn-status-divider {
  height: 1px;
  background: #e2e2e2;
  margin: 3px 0;
}

/* Checkboxes */
.msn-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 11px;
  color: #173b64;
  cursor: pointer;
}

.msn-checkbox-row input[type="checkbox"] {
  cursor: pointer;
}

/* Botón Iniciar Sesión */
.msn-btn-primary {
  height: 24px;
  padding: 0 16px;
  border: 1px solid var(--msn-btn-border);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--msn-btn-bg-start) 0%, var(--msn-btn-bg-end) 100%);
  color: #153b68;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.msn-btn-primary:hover {
  background: linear-gradient(180deg, var(--msn-btn-hover-start) 0%, var(--msn-btn-hover-end) 100%);
  border-color: #5587be;
}

.msn-btn-primary:active {
  background: linear-gradient(180deg, #c7def5 0%, #e2eefa 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Enlaces */
.msn-link {
  color: var(--msn-link-blue);
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
}

.msn-link:hover {
  color: #003399;
}

/* ==========================================================================
   Ventana Principal de MSN Messenger (Una vez conectado)
   ========================================================================== */
#msn-main-window {
  width: 290px;
  height: 560px;
  top: 30px;
  right: 30px;
  z-index: 100;
}

.msn-user-header {
  background: linear-gradient(180deg, #e8f2fc 0%, #d1e5f8 100%);
  border-bottom: 1px solid #b6d1ed;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.msn-user-avatar-mini {
  width: 48px;
  height: 48px;
  background: #fff;
  border: 1px solid #9bbde0;
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.msn-user-info-text {
  flex: 1;
  overflow: hidden;
}

.msn-user-nickname {
  font-size: 12px;
  font-weight: bold;
  color: #173b64;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msn-user-pm {
  font-size: 10px;
  color: #555555;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 1px 3px;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msn-user-pm:hover {
  background: #fff;
  border-color: #9cbddf;
}

/* Lista de Contactos */
.msn-contact-list {
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
}

.msn-group-header {
  background: linear-gradient(180deg, #f5f9fe 0%, #e2effc 100%);
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #cfe1f3;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 11px;
  color: #214f88;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.msn-contact-item {
  padding: 5px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-bottom: 1px solid #f2f5f9;
}

.msn-contact-item:hover,
.msn-contact-item.selected {
  background: #e4f0fa;
}

.msn-contact-item .name {
  font-size: 11px;
  font-weight: 600;
  color: #1a3c66;
}

.msn-contact-item .pm {
  font-size: 10px;
  color: #6d849f;
  margin-left: 4px;
}

.msn-unread-count {
  background: #e82020;
  color: #ffffff;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
  animation: pulse-red 1s infinite alternate;
}

.msn-contact-item-del-btn {
  background: transparent;
  border: none;
  color: #8fa6c2;
  font-size: 13px;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msn-contact-item:hover .msn-contact-item-del-btn,
.msn-contact-item.selected .msn-contact-item-del-btn {
  opacity: 1;
}

.msn-contact-item-del-btn:hover {
  background: #fde8e8;
  color: #d32f2f;
}

/* En teléfonos móviles mostrar siempre el botón discretamente */
@media (max-width: 768px) {
  .msn-contact-item-del-btn {
    opacity: 0.8 !important;
    font-size: 14px;
    padding: 4px 8px;
  }
}

/* Menú Contextual Clásico de Windows / MSN */
.msn-context-menu {
  position: fixed;
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25);
  z-index: 9999;
  min-width: 190px;
  padding: 2px 0;
  font-size: 11px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  border-radius: 2px;
}

.msn-context-item {
  padding: 6px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #000000;
  user-select: none;
}

.msn-context-item:hover {
  background: #2b78e4;
  color: #ffffff;
}

.msn-context-item.danger:hover {
  background: #d32f2f;
  color: #ffffff;
}

.msn-context-divider {
  height: 1px;
  background: #e3e9ef;
  margin: 3px 0;
}

/* ==========================================================================
   Ventana de Chat EXACTA A LA IMAGEN (MSN Messenger 7.0 / 7.5 Luna Blue)
   ========================================================================== */
.msn-chat-window-xp {
  width: 540px;
  height: 480px;
  z-index: 200;
  background: #eaf1fb;
  border-radius: 8px 8px 3px 3px;
  border: 1px solid #0055ea;
  box-shadow: 0 8px 24px rgba(0, 30, 80, 0.45), 0 0 0 1px #a4c7f5 inset;
}

/* Barra de Título Windows XP Luna Blue */
.msn-xp-titlebar {
  height: 28px;
  background: linear-gradient(180deg, #0058e6 0%, #3a93ff 10%, #0055ea 50%, #0046c8 100%);
  padding: 0 4px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
}

.msn-xp-titlebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 1px 1px 2px #002b77;
}

.msn-xp-win-btn {
  width: 21px;
  height: 21px;
  border: 1px solid #ffffff;
  border-radius: 3px;
  background: linear-gradient(180deg, #4b9aff 0%, #176beb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.msn-xp-win-btn:hover {
  background: linear-gradient(180deg, #7ab4ff 0%, #3082f7 100%);
}

.msn-xp-win-btn.close {
  background: linear-gradient(180deg, #ff6a6a 0%, #d82b2b 50%, #b81919 100%);
  border-color: #ffffff;
}

.msn-xp-win-btn.close:hover {
  background: linear-gradient(180deg, #ff8c8c 0%, #e84343 100%);
}

/* Barra de Actividades Superior de MSN 7.5 */
.msn-activity-bar {
  background: linear-gradient(180deg, #f5f9fe 0%, #e2eefa 55%, #c5def6 100%);
  border-bottom: 1px solid #a8c8ec;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msn-activity-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.msn-activity-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
}

.msn-activity-btn:hover {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 3px rgba(0, 100, 200, 0.2);
}

.msn-activity-btn .icon {
  font-size: 18px;
  line-height: 1;
}

.msn-activity-btn .lbl {
  font-size: 10px;
  color: #173b64;
  font-family: inherit;
}

.msn-activity-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.msn-round-tool-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #92b8de;
  background: linear-gradient(180deg, #ffffff 0%, #d8e7f7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
}

/* Cuerpo de Chat de 2 Columnas */
.msn-chat-body-split {
  flex: 1;
  display: flex;
  padding: 6px;
  gap: 8px;
  overflow: hidden;
}

.msn-chat-left-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

/* Caja de Historial */
.msn-history-container {
  flex: 1;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.06);
}

.msn-history-to-header {
  padding: 4px 8px;
  font-size: 11px;
  color: #4b6b94;
  border-bottom: 1px solid #e5eef7;
  background: #fafcfe;
}

.msn-history-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  user-select: text;
  font-size: 12px;
}

.msn-msg {
  margin-bottom: 6px;
  word-break: break-word;
}

.msn-msg .author {
  font-weight: bold;
  font-size: 11px;
}

.msn-msg.mine .author {
  color: #1b497e;
}

.msn-msg.theirs .author {
  color: #c02424;
}

.msn-msg .time {
  font-size: 9px;
  color: #888888;
  margin-left: 6px;
}

.msn-msg.nudge-banner {
  background: #fff0f0;
  border: 1px solid #ffcccc;
  border-radius: 4px;
  padding: 4px 8px;
  color: #b71c1c;
  font-weight: bold;
  text-align: center;
  margin: 6px 0;
}

/* Fotos e Imágenes en el Chat (Estilo Clásico Windows XP) */
.msn-chat-photo-wrapper {
  margin: 4px 0 6px 12px;
  display: inline-block;
  background: #ffffff;
  padding: 4px;
  border: 1px solid #8baed4;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.msn-chat-photo {
  max-width: 200px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.msn-chat-photo:active {
  transform: scale(0.98);
}

/* Reproductor de Clip de Voz (MSN Voice Clip) */
.msn-voice-clip-card {
  margin: 4px 0 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #ebf4fd 100%);
  border: 1px solid #7ea8d6;
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 180px;
  max-width: 260px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.msn-voice-play-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2b78e4 0%, #1754aa 100%);
  border: 1px solid #10428a;
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.msn-voice-play-circle:active {
  transform: scale(0.94);
}

.msn-voice-bar-anim {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 12px;
  margin-top: 3px;
}

.msn-voice-bar-anim span {
  width: 3px;
  height: 6px;
  background: #78a2d1;
  border-radius: 2px;
}

.msn-voice-clip-card.playing .msn-voice-bar-anim span {
  animation: voice-bar-pulse 0.6s infinite alternate;
}

.msn-voice-clip-card.playing .msn-voice-bar-anim span:nth-child(2) { animation-delay: 0.15s; }
.msn-voice-clip-card.playing .msn-voice-bar-anim span:nth-child(3) { animation-delay: 0.3s; }
.msn-voice-clip-card.playing .msn-voice-bar-anim span:nth-child(4) { animation-delay: 0.45s; }
.msn-voice-clip-card.playing .msn-voice-bar-anim span:nth-child(5) { animation-delay: 0.6s; }

@keyframes voice-bar-pulse {
  0% { height: 4px; }
  100% { height: 14px; background: #0055ea; }
}

/* Indicador de Grabación Activa */
.msn-recording-bar {
  background: #ffebee;
  border: 1px solid #ffcdd2;
  border-radius: 6px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 11px;
  color: #c62828;
  font-weight: bold;
  animation: pulse-red-border 1s infinite alternate;
}

@keyframes pulse-red-border {
  from { border-color: #ef9a9a; }
  to { border-color: #b71c1c; }
}

/* Popups de Guiños (Winks) y Emoticonos */
.msn-winks-grid {
  position: absolute;
  background: #ffffff;
  border: 1px solid #7ea8d6;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  z-index: 5000;
}

.msn-wink-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  border: 1px solid #e1ecf8;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  color: #173b64;
  text-align: center;
}

.msn-wink-item:hover {
  background: #e4f0fa;
  border-color: #0055ea;
}

.msn-wink-item span.emoji {
  font-size: 24px;
  margin-bottom: 2px;
}

@keyframes wink-scale {
  0% { transform: scale(0.2); opacity: 0; }
  25% { transform: scale(1.3); opacity: 1; }
  50% { transform: scale(1.0); opacity: 1; }
  85% { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.msn-chat-textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 12px;
  user-select: text;
}

/* Barra de Herramientas de Formato y Emoticonos */
.msn-format-toolbar {
  background: linear-gradient(180deg, #ffffff 0%, #e6f1fc 100%);
  border: 1px solid #a8c8ec;
  border-radius: 4px;
  height: 26px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.msn-fmt-btn {
  height: 20px;
  padding: 0 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  font-size: 11px;
  color: #173b64;
}

.msn-fmt-btn:hover {
  background: #cfe2f7;
  border-color: #9cbddf;
}

/* Caja de Entrada de Texto con Botones Send & Search */
.msn-input-row-box {
  height: 70px;
  display: flex;
  gap: 6px;
}

.msn-input-frame {
  flex: 1;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.06);
}

.msn-send-search-buttons {
  width: 65px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msn-xp-btn {
  flex: 1;
  background: linear-gradient(180deg, #ffffff 0%, #ece9d8 15%, #d4d0c8 85%, #b5b1a8 100%);
  border: 1px solid #003c74;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.msn-xp-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #fbeac4 50%, #f8c966 100%);
  border-color: #e59700;
}

.msn-xp-btn:active {
  background: linear-gradient(180deg, #cecbbe 0%, #dedbd1 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}

/* Columna Derecha de Avatares (Display Pictures) */
.msn-chat-right-col {
  width: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
}

.msn-display-picture-card {
  background: #ffffff;
  border: 1px solid #8caed4;
  border-radius: 7px;
  padding: 4px;
  box-shadow: 0 2px 4px rgba(0, 20, 50, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.msn-dp-image-holder {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.msn-dp-image-holder img,
.msn-dp-image-holder svg {
  max-width: 96px;
  max-height: 96px;
}

.msn-dp-dropdown-arrow {
  position: absolute;
  right: 5px;
  bottom: 3px;
  font-size: 8px;
  color: #5577a0;
  cursor: pointer;
}

.msn-dp-side-tab {
  position: absolute;
  right: -5px;
  top: 14px;
  width: 5px;
  height: 24px;
  background: #bcd7f4;
  border: 1px solid #8caed4;
  border-left: none;
  border-radius: 0 3px 3px 0;
}

/* Pie de la Ventana de Chat */
.msn-chat-bottom-bar {
  background: #f1f7fe;
  border-top: 1px solid #c2daf4;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
}

.msn-bottom-promo-link {
  color: #105cb6;
  text-decoration: underline;
  cursor: pointer;
}

.msn-bottom-promo-link:hover {
  color: #003399;
}

/* ==========================================================================
   Modal Cambiar Imagen Para Mostrar (MSN Display Picture)
   ========================================================================== */
.msn-avatar-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
}

.msn-avatar-option {
  width: 58px;
  height: 58px;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fbfe;
}

.msn-avatar-option:hover {
  background: #e2f0fc;
  border-color: #90b8e4;
}

.msn-avatar-option.selected {
  border-color: #316ac5;
  background: #cce4f7;
  box-shadow: 0 0 4px rgba(49, 106, 197, 0.5);
}

.msn-avatar-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Efecto Zumbido de Ventana */
@keyframes msn-shake {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-10px, 8px); }
  20% { transform: translate(10px, -8px); }
  30% { transform: translate(-8px, -6px); }
  40% { transform: translate(8px, 6px); }
  50% { transform: translate(-6px, 4px); }
  60% { transform: translate(6px, -4px); }
  70% { transform: translate(-4px, 2px); }
  80% { transform: translate(4px, -2px); }
  100% { transform: translate(0, 0); }
}

.msn-shaking,
.msn-body-shaking {
  animation: msn-shake 0.55s ease-in-out;
}

/* Barra de Tareas Inferior Windows XP */
#msn-taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(180deg, #245dd0 0%, #1e52ba 10%, #1b49a5 50%, #1a4294 100%);
  border-top: 1px solid #4a82ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  z-index: 9999;
}

.msn-start-button {
  height: 28px;
  padding: 0 14px 0 10px;
  background: linear-gradient(180deg, #43b346 0%, #3ca73f 12%, #2f8c32 50%, #257428 100%);
  border: 1px solid #57ca5b;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
  font-style: italic;
  text-shadow: 1px 1px 1px #0f3d10;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.msn-taskbar-tasks {
  flex: 1;
  display: flex;
  gap: 4px;
  margin: 0 8px;
  overflow-x: auto;
}

.msn-task-btn {
  height: 24px;
  max-width: 160px;
  padding: 0 8px;
  background: linear-gradient(180deg, #3776e6 0%, #2059c2 100%);
  border: 1px solid #1848a6;
  border-radius: 3px;
  color: #ffffff;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msn-task-btn.active {
  background: linear-gradient(180deg, #1b49a5 0%, #123780 100%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

.msn-tray {
  background: #0f367e;
  border-left: 1px solid #16469d;
  height: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 11px;
}

/* Popup de Emoticonos MSN */
.msn-emoticons-grid {
  position: absolute;
  background: #ffffff;
  border: 1px solid #7f9db9;
  box-shadow: 2px 4px 12px rgba(0,0,0,0.25);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  z-index: 3000;
  border-radius: 3px;
}

.msn-emoticon-item {
  width: 26px;
  height: 26px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 3px;
}

.msn-emoticon-item:hover {
  background: #cce4f7;
}

/* ==========================================================================
   Modo Teléfono Móvil (Ventana única a pantalla completa) vs Escritorio (Multi-ventana)
   ========================================================================== */
.msn-mobile-back-btn {
  display: none;
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
  }

  #desktop-area {
    bottom: 0 !important;
  }

  /* Ocultar barra de tareas en teléfono para ganar 100% de pantalla */
  #msn-taskbar {
    display: none !important;
  }

  /* El botón de volver solo se muestra en móvil */
  .msn-mobile-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 6px;
  }

  .msn-mobile-back-btn:active {
    background: rgba(255, 255, 255, 0.45);
  }

  /* Ventana de Login en Móvil: Pantalla Completa Única */
  .msn-login-card {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
  }

  /* Ventana Principal de Contactos en Móvil: Pantalla Completa Única y Safe Area */
  #msn-main-window {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 1000 !important;
    padding-top: env(safe-area-inset-top, 20px) !important;
    padding-bottom: env(safe-area-inset-bottom, 15px) !important;
    box-sizing: border-box !important;
    background: #0055ea !important; /* Azul Luna XP detrás del notch del iPhone */
  }

  /* Barra de Título en Celular: Espacio para reloj y Dynamic Island */
  #main-titlebar {
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #0055ea 0%, #0040b0 100%) !important;
  }

  .msn-mobile-top-tools {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .msn-mobile-top-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 9px;
    border-radius: 5px;
    cursor: pointer;
    line-height: 1.2;
    touch-action: manipulation;
  }

  .msn-mobile-top-btn:active {
    background: rgba(255, 255, 255, 0.5);
  }

  .msn-mobile-top-btn.menu-btn {
    background: #ffffff;
    color: #0045b5;
    border-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  /* Lista de Contactos en Celular: Áreas Táctiles Cómodas */
  .msn-contact-item {
    padding: 10px 14px !important;
    gap: 12px !important;
    min-height: 52px !important;
    border-bottom: 1px solid #eef2f7 !important;
  }

  .msn-contact-item img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
  }

  .msn-contact-item .name {
    font-size: 13px !important;
    color: #0b2e59 !important;
  }

  .msn-contact-item .pm {
    font-size: 11px !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 1px !important;
  }

  .msn-contact-item-del-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 50% !important;
    background: #eef4fb !important;
    color: #6d849f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  /* Ventana de Conversación / Chat en Móvil: Pantalla Completa Única */
  .msn-chat-window-xp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 3000 !important;
    padding-top: env(safe-area-inset-top, 20px) !important;
    padding-bottom: env(safe-area-inset-bottom, 15px) !important;
    box-sizing: border-box !important;
    background: #0055ea !important;
  }

  .msn-xp-titlebar {
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 0 !important;
  }

  .msn-mobile-back-btn {
    height: 28px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
  }

  /* OCULTAR EN CELULAR LA COLUMNA DE AVATARES GIGANTES QUE OCULTA LOS BOTONES */
  .msn-chat-right-col {
    display: none !important;
  }

  /* Ocultar barra clásica de menús en el chat de celular */
  .msn-chat-window-xp .msn-menubar {
    display: none !important;
  }

  /* Barra de Actividades Superior: Desplazable horizontalmente en celular */
  .msn-activity-bar {
    height: 42px !important;
    padding: 2px 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: #eef5fc !important;
    border-bottom: 1px solid #c7dcf3 !important;
  }

  .msn-activity-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  .msn-activity-btn {
    padding: 3px 7px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
    height: 34px !important;
    gap: 2px !important;
  }

  .msn-activity-btn .icon {
    font-size: 15px !important;
  }

  .msn-activity-right {
    display: none !important;
  }

  .msn-footer-ad-bar {
    display: none !important;
  }

  /* Barra de Formato y Emoticonos: Desplazable con botones táctiles cómodos */
  .msn-format-toolbar {
    height: 32px !important;
    padding: 2px 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    background: #eef4fb !important;
  }

  .msn-fmt-btn {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    border: 1px solid #bcd4ee !important;
  }

  .msn-chat-left-col {
    width: 100% !important;
    flex: 1 1 100% !important;
    gap: 4px !important;
  }

  .msn-chat-body-split {
    padding: 4px 6px !important;
    height: calc(100% - 46px) !important;
    gap: 0 !important;
  }

  .msn-chat-bottom-input {
    padding: 6px 8px !important;
  }

  .msn-input-row-box {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-top: 4px !important;
  }

  .msn-input-frame {
    flex: 1 !important;
  }

  .msn-chat-textarea {
    font-size: 14px !important;
    min-height: 48px !important;
    padding: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .msn-send-search-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 74px !important;
    flex-shrink: 0 !important;
  }

  .msn-send-search-buttons button:last-child {
    display: none !important; /* Ocultar botón Search en celular para ganar espacio */
  }

  .msn-send-search-buttons .msn-xp-btn {
    height: 100% !important;
    min-height: 48px !important;
    width: 100% !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #003399 !important;
    border-radius: 6px !important;
  }

  /* Modales en móvil centrados a pantalla casi completa */
  #add-contact-modal,
  #register-modal,
  #change-avatar-modal,
  #friend-request-modal,
  #delete-contact-modal {
    position: fixed !important;
    width: 92vw !important;
    max-width: 92vw !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9500 !important;
  }
}

/* ==========================================================================
   DRAWER / SHEET MÓVIL SUPER ADAPTADO Y AMIGABLE
   ========================================================================== */
.msn-mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.msn-mobile-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.msn-mobile-sheet-content {
  position: relative;
  background: #f4f8fd;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.35);
  max-height: 82vh;
  max-height: 82dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(env(safe-area-inset-bottom), 18px);
  border-top: 2px solid #0055ea;
  animation: msn-sheet-up 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msn-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.msn-mobile-sheet-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d4e2f2;
  background: linear-gradient(180deg, #ffffff 0%, #edf4fc 100%);
  border-radius: 14px 14px 0 0;
  font-size: 13px;
  color: #173b64;
}

.msn-mobile-sheet-body {
  padding: 14px 16px;
}

.msn-mobile-section-title {
  font-size: 10px;
  font-weight: bold;
  color: #5c7b9e;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.msn-mobile-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.msn-mobile-sheet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #bcd2ea;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #1a3c66;
  cursor: pointer;
  text-align: left;
}

.msn-mobile-sheet-item:active {
  background: #e4f0fa;
  border-color: #0055ea;
}

.msn-mobile-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msn-mobile-list-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: #ffffff;
  border: 1px solid #bcd2ea;
  border-radius: 8px;
  font-size: 13px;
  color: #1a3c66;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.msn-mobile-list-btn:active {
  background: #e4f0fa;
  border-color: #0055ea;
}

.msn-mobile-list-btn.danger {
  color: #b00020;
  border-color: #f7ccd0;
  background: #fff8f8;
}
}