/* ==========================================
   💬 MSN MESSENGER — Frutiger Aero skin
   Glossy aqua-blue gradients, glass shine, rounded chrome — the classic
   Windows Live Messenger look, on top of this site's own window system.
   ========================================== */

.msn-titlebar {
  background: linear-gradient(180deg, #eaf6ff 0%, #bfe4fb 45%, #7fc3ef 46%, #3f9ee0 100%);
  color: #113a5c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.msn-title-icon { margin-right: 4px; }

.msn-body {
  background: linear-gradient(180deg, #eef8ff 0%, #d7ecfb 100%);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- sign-in gate ---- */
.msn-signin-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 14px 26px;
  text-align: center;
}
.msn-signin-logo {
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(17, 58, 92, 0.35));
  animation: msnLogoFloat 3.2s ease-in-out infinite;
}
@keyframes msnLogoFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-4px) rotate(4deg); }
}
.msn-signin-title {
  font: 700 16px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #0e5aa0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}
.msn-nick-label {
  margin: 0;
  font: 600 13px/1.4 "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #144a75;
}
.msn-nick-input,
.msn-input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 5px;
  border: 1px solid #7fa8c9;
  background: #ffffff;
  box-shadow: inset 0 1px 3px rgba(17, 58, 92, 0.25);
  font: 13px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #14324a;
}
.msn-nick-input:focus,
.msn-input:focus {
  outline: none;
  border-color: #3f9ee0;
  box-shadow: inset 0 1px 3px rgba(17, 58, 92, 0.25), 0 0 0 2px rgba(63, 158, 224, 0.25);
}

.msn-nick-btn,
.msn-send-btn {
  flex: none;
  padding: 7px 16px;
  border-radius: 5px;
  border: 1px solid #2f7cb8;
  background: linear-gradient(180deg, #fbfeff 0%, #cdeaff 45%, #8fceef 46%, #57aee0 100%);
  color: #0e3a4a;
  font: 600 12px "Segoe UI", Tahoma, Verdana, sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(17, 58, 92, 0.3);
}
.msn-nick-btn:hover,
.msn-send-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #dcf2ff 45%, #a6dcf7 46%, #6cbceb 100%);
}
.msn-nick-btn:active,
.msn-send-btn:active {
  background: linear-gradient(180deg, #8fceef 0%, #57aee0 100%);
}

/* ---- chat area ---- */
.msn-chat-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msn-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font: 11px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #3a6a8a;
}
.msn-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #4cc24c;
  box-shadow: 0 0 4px rgba(76, 194, 76, 0.8);
}

.msn-transcript {
  height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #a9c9e0;
  border-radius: 6px;
  box-shadow: inset 0 1px 4px rgba(17, 58, 92, 0.2);
  padding: 8px 10px;
  font: 12.5px/1.5 "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #1c2b36;
}
.msn-line { margin-bottom: 6px; }
.msn-line-nick { font-weight: 700; }
.msn-line-nick::after { content: ":"; }
.msn-line-time { float: right; color: #8a9aa6; font-size: 10.5px; }
.msn-line-text { color: #1c2b36; }

.msn-input-row { display: flex; gap: 8px; }
.msn-input-row .msn-input { flex: 1; }

/* ---- nudge ---- */
.msn-nudge-btn {
  margin-left: auto;
  flex: none;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid #2f7cb8;
  background: linear-gradient(180deg, #fff6d8 0%, #ffe38a 45%, #f6c453 46%, #e8a721 100%);
  color: #5a3d05;
  font: 600 10.5px "Segoe UI", Tahoma, Verdana, sans-serif;
  cursor: pointer;
}
.msn-nudge-btn:hover { filter: brightness(1.06); }
.msn-nudge-btn:active { filter: brightness(0.94); }

/* Shaken when a nudge arrives — applied to the whole conversation window */
@keyframes msnNudgeShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 1px); }
  20% { transform: translate(5px, -1px); }
  30% { transform: translate(-5px, 2px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 1px); }
  60% { transform: translate(4px, -1px); }
  70% { transform: translate(-3px, 1px); }
  80% { transform: translate(3px, -1px); }
  90% { transform: translate(-1px, 0); }
}
.msn-window.msn-nudging { animation: msnNudgeShake 0.5s ease-in-out; }
.msn-line-nudge {
  text-align: center;
  font-style: italic;
  color: #a8760a;
  font-size: 11.5px;
}

/* ---- emoticon row ---- */
.msn-emoticon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.msn-emoticon-row button {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.msn-emoticon-row button:hover {
  border-color: #a9c9e0;
  background: #eaf5ff;
}

/* ---- typing indicator ---- */
.msn-typing-indicator {
  min-height: 14px;
  font: italic 11px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #6a8aa2;
}

/* ---- contact list window ---- */
.msn-contacts-body { padding: 12px 10px; }

.msn-me-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #b9d8ee;
}
.msn-me-avatar {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 18px;
  background: #ffffff;
  border: 1px solid #7fa8c9;
  border-radius: 4px;
}
.msn-me-info { flex: 1; min-width: 0; }
.msn-me-name {
  font: 700 13px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #0e5aa0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msn-me-message {
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  padding: 2px 4px;
  border: 1px solid transparent;
  background: transparent;
  font: italic 11px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #4a6a80;
}
.msn-me-message:hover, .msn-me-message:focus {
  border-color: #a9c9e0;
  background: #ffffff;
  outline: none;
}

.msn-status-select {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  border-radius: 5px;
  border: 1px solid #7fa8c9;
  background: #ffffff;
  font: 12px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #14324a;
}

.msn-contact-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid #7fa8c9;
  background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='%237fa8c9' stroke-width='1.5'/><line x1='11' y1='11' x2='15' y2='15' stroke='%237fa8c9' stroke-width='1.5'/></svg>") no-repeat right 6px center;
  background-size: 13px;
  font: 12px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #14324a;
}

.msn-contact-group-label {
  font: 700 10.5px "Segoe UI", Tahoma, Verdana, sans-serif;
  letter-spacing: .02em;
  color: #3a6a8a;
  text-transform: uppercase;
  margin-top: 2px;
}

.msn-contact-list {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.msn-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font: 12px "Segoe UI", Tahoma, Verdana, sans-serif;
  color: #1c2b36;
}
.msn-contact-row:hover { background: #dcf0ff; }
.msn-contact-row.msn-contact-room { font-weight: 700; color: #0e5aa0; }
.msn-contact-status { font-size: 9px; flex: none; margin-top: 2px; }
.msn-contact-text { display: flex; flex-direction: column; min-width: 0; }
.msn-contact-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msn-contact-msg {
  font-style: italic;
  font-size: 10.5px;
  color: #5a7a90;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msn-contact-empty { padding: 6px; font: italic 11.5px "Segoe UI", Tahoma, Verdana, sans-serif; color: #7f97a8; }