/* ══════════════════════════════════════════════════════════════════════
   MSN Messenger — Editorial Accordion Layout
   Deep navy editorial frame wrapping retro WLM ~2005-2009 chat chrome.
   ══════════════════════════════════════════════════════════════════════ */

/* ── MSN Color Palette ── */
:root {
  --msn-navy: #0D1B3E;
  --msn-navy-border: #091428;
  --msn-blue: #1B5BA2;
  --msn-blue-light: #2D7DD2;
  --msn-blue-hover: #154A85;
  --msn-green-online: #6CBB3C;
  --msn-chat-bg: #FFFFFF;
  --msn-chat-text: #000000;
  --msn-screenname-self: #0000FF;
  --msn-screenname-other: #CC0000;
  --msn-toolbar-bg: #F0F0F0;
  --msn-border: #ADB5BD;
  --msn-system-msg: #808080;
  --msn-statusbar-bg: linear-gradient(180deg, #F5F5F5, #E0E0E0);
}

/* ══════════════════════════════════════════════════════════════════════
   Editorial Frame — deep navy wrapper (matches Juve pattern)
   ══════════════════════════════════════════════════════════════════════ */

.msn-editorial {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--msn-navy);
  border: 8px solid var(--msn-navy);
  outline: 4px solid var(--msn-navy-border);
  overflow: hidden;
  padding: var(--sp-6, 24px) var(--sp-4, 16px) var(--sp-4, 16px);
}

/* ══════════════════════════════════════════════════════════════════════
   MSN Chrome — retro Messenger UI (the "hero content")
   ══════════════════════════════════════════════════════════════════════ */

.msn-chrome {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: 460px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  color: var(--msn-chat-text);
  background: var(--msn-chat-bg);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ── MSN Header ── */

.msn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--msn-blue-light), var(--msn-blue));
  color: #fff;
  min-height: 48px;
  flex-shrink: 0;
}

.msn-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
  flex-shrink: 0;
}

.msn-header-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.msn-header-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.msn-header-status {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.msn-header-icons {
  display: flex;
  gap: 6px;
  font-size: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ── Chat Transcript (scrollable messages) ── */

.msn-transcript {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  background: var(--msn-chat-bg);
  border-top: 1px solid var(--msn-border);
  border-bottom: 1px solid var(--msn-border);
}

/* Message block (sender line + text) */
.msn-message-block {
  margin-bottom: 6px;
}

.msn-sender-self {
  font-weight: 700;
  color: var(--msn-screenname-self);
  font-size: 12px;
}

.msn-sender-other {
  font-weight: 700;
  color: var(--msn-screenname-other);
  font-size: 12px;
}

.msn-message-text {
  margin-top: 1px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* System messages */
.msn-system-message {
  text-align: center;
  color: var(--msn-system-msg);
  font-style: italic;
  font-size: 11px;
  margin: 8px 0;
}

/* Typing indicator */
.msn-typing-indicator {
  color: var(--msn-system-msg);
  font-style: italic;
  font-size: 11px;
  margin-top: 4px;
}

/* ── Emoticon Toolbar ── */

.msn-toolbar {
  display: flex;
  gap: 6px;
  padding: 4px 12px;
  background: var(--msn-toolbar-bg);
  border-bottom: 1px solid var(--msn-border);
  min-height: 28px;
  align-items: center;
  flex-shrink: 0;
}

.msn-toolbar-icon {
  font-size: 14px;
  cursor: default;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.msn-toolbar-icon:hover {
  opacity: 1;
}

.msn-nudge-btn {
  cursor: pointer !important;
}

/* ── Input Area ── */

.msn-input-area {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  gap: 6px;
  flex-shrink: 0;
  background: var(--msn-chat-bg);
}

.msn-input {
  width: 100%;
  resize: none;
  border: 1px solid var(--msn-border);
  border-radius: 3px;
  padding: 6px 8px;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 13px;
  color: var(--msn-chat-text);
  background: #fff;
  outline: none;
  box-sizing: border-box;
}

.msn-input:focus {
  border-color: var(--msn-blue);
}

.msn-input-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.msn-send-btn {
  background: var(--msn-blue);
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.msn-send-btn:hover {
  background: var(--msn-blue-hover);
}

.msn-send-btn:active {
  transform: scale(0.97);
}

/* ── Status Bar ── */

.msn-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 12px;
  background: var(--msn-statusbar-bg);
  border-top: 1px solid var(--msn-border);
  min-height: 20px;
  flex-shrink: 0;
  font-size: 11px;
  color: #555;
}

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

.msn-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--msn-green-online);
}

.msn-butterfly {
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════
   Nudge Animation — shakes the editorial frame / launcher panel
   ══════════════════════════════════════════════════════════════════════ */

@keyframes msnNudge {
  0%   { transform: translate(0, 0); }
  2%   { transform: translate(-8px, 6px); }
  4%   { transform: translate(10px, -4px); }
  6%   { transform: translate(-6px, -8px); }
  8%   { transform: translate(8px, 6px); }
  10%  { transform: translate(-10px, 2px); }
  12%  { transform: translate(6px, -6px); }
  14%  { transform: translate(-4px, 8px); }
  16%  { transform: translate(10px, -2px); }
  18%  { transform: translate(-8px, -6px); }
  20%  { transform: translate(4px, 8px); }
  22%  { transform: translate(-10px, -4px); }
  24%  { transform: translate(8px, 6px); }
  26%  { transform: translate(-6px, -8px); }
  28%  { transform: translate(10px, 2px); }
  30%  { transform: translate(-4px, 6px); }
  32%  { transform: translate(6px, -8px); }
  34%  { transform: translate(-10px, 4px); }
  36%  { transform: translate(8px, -6px); }
  38%  { transform: translate(-6px, 8px); }
  40%  { transform: translate(10px, -4px); }
  42%  { transform: translate(-8px, 2px); }
  44%  { transform: translate(4px, -6px); }
  46%  { transform: translate(-6px, 8px); }
  48%  { transform: translate(8px, -2px); }
  50%  { transform: translate(-10px, -4px); }
  52%  { transform: translate(6px, 6px); }
  54%  { transform: translate(-4px, -8px); }
  56%  { transform: translate(8px, 4px); }
  58%  { transform: translate(-6px, -6px); }
  60%  { transform: translate(4px, 8px); }
  62%  { transform: translate(-8px, -2px); }
  64%  { transform: translate(6px, 4px); }
  66%  { transform: translate(-4px, -6px); }
  68%  { transform: translate(6px, 2px); }
  70%  { transform: translate(-4px, -4px); }
  72%  { transform: translate(4px, 4px); }
  74%  { transform: translate(-2px, -2px); }
  76%  { transform: translate(2px, 2px); }
  78%  { transform: translate(-2px, -2px); }
  80%  { transform: translate(2px, 2px); }
  82%  { transform: translate(-1px, -1px); }
  84%  { transform: translate(1px, 1px); }
  86%  { transform: translate(-1px, -1px); }
  88%  { transform: translate(1px, 1px); }
  90%  { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

.msn-nudge {
  animation: msnNudge 0.8s linear;
}