/* MSN Messenger — the inner surfaces of the Contact List and Conversation
   windows. The window chrome, taskbar and dialogs all come from xp.css and
   wm.js; nothing here draws a title bar, a start button or a desktop.

   MangoChat's own msn.css and its vendored xp.css are deliberately NOT loaded
   on this page. They restyle bare elements globally and collide head-on with
   this app's .row/.dim/.dialog/.tray/#desktop rules. The handful of inner
   styles worth having are transcribed here instead, namespaced under .msn-*,
   so one canonical copy of the CRYPTO is shared while the CSS stays ours. */

/* --- sign in -------------------------------------------------------------- */

/* MSN 7's sign-in was a soft white-to-blue wash, not the grey of a dialog. */
.msn-signin {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 22px 18px;
  background: linear-gradient(to bottom, #ffffff 0%, #eef4fd 45%, #cfe0f5 100%);
}

/* The buddy icon. Without an explicit size this is a viewBox-only SVG in a
   flush window body, which paints at whatever the layout gives it -- roughly
   150px, which is what made the signed-out view look broken rather than
   merely inaccurate. */
.msn-signin-logo {
  display: block;
  width: 64px;
  height: 64px;
  margin: 6px auto 14px;
  flex: none;
}

.msn-signin label {
  display: block;
  margin: 9px 0 2px;
}

.msn-signin .field { width: 100%; }

.msn-signin-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* MSN centred its Sign In button rather than right-aligning it, and gave it
   more width than a standard 75px dialog button. */
.msn-signin-actions .btn { min-width: 88px; }

.msn-signin-links {
  margin-top: auto;
  padding-top: 14px;
  text-align: center;
  line-height: 16px;
}

.msn-signin-links a {
  color: #0f4bb5;
  cursor: pointer;
  text-decoration: underline;
}

.msn-signin-note {
  margin: 10px 0 0;
  text-align: center;
  color: var(--text-dim);
  line-height: 14px;
}

/* Inline validation, in Windows' error red rather than a modern flat red. */
.msn-firstrun-problem {
  margin: 8px 0 0;
  color: #a11111;
}
.msn-firstrun-problem:empty { display: none; }

/* --- contact list --------------------------------------------------------- */

.msn-me {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  padding: 8px;
  background: linear-gradient(#ffffff, #dfe8f6);
  border-bottom: 1px solid #a8bcd8;
}

.msn-me-dp {
  width: 44px; height: 44px;
  border: 1px solid #7f9db9;
  background: #fff center/cover no-repeat;
}

.msn-me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.msn-me-name {
  font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The personal message: click to edit, like MSN 7.5. */
.msn-psm {
  color: var(--text-dim);
  font-style: italic;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text;
}
.msn-psm:hover { text-decoration: underline; }
.msn-psm:empty::before { content: "Share a quick message"; opacity: .7; }

.msn-status-row { display: flex; align-items: center; gap: 4px; }

/* Buddy groups: "Online (3)" / "Offline (2)". */
.msn-group {
  padding: 3px 6px 2px;
  font-weight: bold;
  background: #eef3fb;
  border-top: 1px solid #d3ddec;
  border-bottom: 1px solid #d3ddec;
  cursor: default;
  user-select: none;
}

.msn-list { flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
.msn-buddies { list-style: none; margin: 0; padding: 0; }

.msn-buddy {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  cursor: default;
  white-space: nowrap;
}
.msn-buddy:hover { background: #dbe8fb; }
.msn-buddy.selected { background: var(--select); color: #fff; }
.msn-buddy.offline .msn-buddy-name { color: var(--text-dim); }

.msn-buddy-icon { width: 16px; height: 16px; flex: none; }
.msn-buddy-name { overflow: hidden; text-overflow: ellipsis; }
.msn-buddy-psm { color: var(--text-dim); font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.msn-buddy.selected .msn-buddy-psm { color: #dce8ff; }

.msn-empty { padding: 14px; text-align: center; color: var(--text-dim); }

/* --- conversation --------------------------------------------------------- */

.msn-convo { display: flex; flex-direction: column; height: 100%; }

/* The "To:" band, MSN's conversation header. */
.msn-to {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: linear-gradient(#ffffff, #e4ecf8);
  border-bottom: 1px solid #a8bcd8;
  white-space: nowrap; overflow: hidden;
}
.msn-to-label { color: var(--text-dim); }

.msn-log {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--field);
  border-bottom: 1px solid #c8c4b4;
  padding: 6px 8px;
  /* Long unbroken strings in a chat message must never widen the window. */
  overflow-wrap: anywhere;
}

.msn-says { margin: 0 0 4px; }
.msn-says-who { font-weight: bold; }
/* Consecutive messages from one person read as one block, as they did in 7.5. */
.msn-says.grouped .msn-says-who { display: none; }
.msn-says.grouped { margin-top: -2px; }

.msn-says-time { color: var(--text-dim); font-size: 10px; margin-left: 4px; }
.msn-says-body { white-space: pre-wrap; }

.msn-says.pending .msn-says-body,
.msn-says.bad .msn-says-body { color: var(--text-dim); font-style: italic; }

.msn-says.unsent .msn-says-body { opacity: .55; }

.msn-event { margin: 3px 0; color: var(--text-dim); font-style: italic; text-align: center; }

.msn-compose { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; }

.msn-compose textarea {
  width: 100%;
  min-height: 52px;
  resize: none;
  font: inherit;
}

.msn-tools { display: flex; align-items: center; gap: 4px; }

.msn-emo { width: 19px; height: 19px; vertical-align: -4px; }

/* Emoticon picker.
   buildPicker() returns its own .emoPicker/.emoPick markup, styled in
   MangoChat's msn.css — which this page deliberately does not load, because
   it collides with our own class names. So the layout is restated here rather
   than inherited: one canonical copy of the emoticon LOGIC, our own CSS. */
.msn-picker { max-height: 190px; overflow-y: auto; } /* .hidden comes from xp.css */

.msn-picker .emoPicker {
  display: grid;
  grid-template-columns: repeat(auto-fill, 26px);
  gap: 2px;
}

.msn-picker .emoPick {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
.msn-picker .emoPick:hover { border-color: var(--field-border); background: #dbe8fb; }

/* --- nudge ---------------------------------------------------------------- */

/* Transform-only so it composites cheaply, and honours reduced-motion:
   a window that lurches across the desktop is exactly the kind of motion
   people turn off. */
@keyframes msn-nudge {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, -4px); }
  25% { transform: translate(6px, 3px); }
  40% { transform: translate(-5px, 3px); }
  55% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, 2px); }
  85% { transform: translate(3px, -1px); }
}

.window.msn-shaking { animation: msn-nudge .55s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .window.msn-shaking { animation: none; outline: 2px solid var(--luna-blue); }
}

/* --- taskbar flash -------------------------------------------------------- */

/* An unread conversation pulses its taskbar button orange, like MSN did. */
@keyframes msn-flash {
  0%, 100% { background: linear-gradient(#f7c273, #e08a1e); }
  50%      { background: linear-gradient(#fde3b4, #f0a83f); }
}

.task-item.msn-flash { animation: msn-flash 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .task-item.msn-flash { animation: none; background: linear-gradient(#f7c273, #e08a1e); }
}

/* --- tray ----------------------------------------------------------------- */

.tray-msn { display: none; width: 16px; height: 16px; cursor: pointer; }
.tray-msn.on { display: inline-block; }

/* --- Messenger Plus! display-name codes ----------------------------------- */

/* namecodes.js builds DOM nodes carrying exactly these four classes, so they
   must keep these names to stay compatible with the shared module. */
.nc-b { font-weight: bold; }
.nc-i { font-style: italic; }
.nc-u { text-decoration: underline; }
.nc-s { text-decoration: line-through; }

/* --- narrow --------------------------------------------------------------- */

@media (max-width: 720px) {
  .msn-picker { grid-template-columns: repeat(8, 24px); }
}