/* Classic Blue. MSN Messenger 7.5 on Windows XP. */

.skin-msn75 {
  --font: Tahoma, "Segoe UI", Verdana, sans-serif;
  --font-size: 12px;
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", "Android Emoji", sans-serif;

  --desktop: linear-gradient(160deg, #8fb6dd 0%, #5f8fc4 45%, #3f6ea6 100%);
  --desktop-pad: 14px;

  --text: #16324f;
  --muted: #6f8299;
  --label: #1f4b78;
  --link: #0b56a4;
  --accent: #2d7fd4;
  --accent-strong: #0b5cad;

  --win-bg: #ffffff;
  --win-border: #1c5fa8;
  --win-radius: 7px;
  --win-shadow: 0 10px 30px rgba(0,0,0,.35);

  --title-height: 26px;
  --title-bg: linear-gradient(180deg, #4c9be8 0%, #1f6fc4 48%, #1a63b2 52%, #2f81d6 100%);
  --title-text: #ffffff;
  --title-shadow: 0 1px 1px rgba(0,0,0,.45);
  --tb-face: linear-gradient(180deg, #eaf3fd 0%, #b9d5f2 100%);
  --tb-face-hover: linear-gradient(180deg, #ffffff 0%, #cfe4fb 100%);
  --tb-border: #14508f;
  --tb-border-hover: #0b3f75;
  --tb-glyph: #123f70;
  --tb-close-face: linear-gradient(180deg, #f6a89e 0%, #d2402c 100%);

  --menu-bg: linear-gradient(180deg, #ffffff 0%, #e8f1fc 100%);
  --menu-border: #b8d0e8;
  --menu-text: #123f70;
  --menu-hover: #d6e8fb;
  --menu-hover-border: #8cb8e4;
  --popup-bg: #fbfdff;
  --popup-border: #7ea9d6;
  --popup-radius: 4px;

  --signin-bg: linear-gradient(180deg, #ffffff 0%, #f2f8ff 55%, #dfebfa 100%);
  --brand-1: #1f6fc4;
  --brand-2: #e88b1e;

  --input-bg: #ffffff;
  --input-border: #7ba7d7;
  --input-radius: 2px;
  --focus-ring: 0 0 0 2px rgba(45,127,212,.25);
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23123f70'/%3E%3C/svg%3E");

  --btn-face: linear-gradient(180deg, #ffffff 0%, #dfeafa 100%);
  --btn-face-hover: linear-gradient(180deg, #ffffff 0%, #cfe2f8 100%);
  --btn-border: #7ba7d7;
  --btn-border-hover: #2d7fd4;
  --btn-text: #123f70;
  --btn-radius: 3px;
  --btn-default-border: #e8951f;
  --btn-default-glow: 0 0 0 1px rgba(232,149,31,.35);

  --pane-bg: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
  --pane-border: #b8d0e8;
  --me-bg: linear-gradient(180deg, #eaf3fd 0%, #d7e8fa 100%);
  --toolbar-bg: linear-gradient(180deg, #fbfdff 0%, #dfeafa 100%);
  --toolbar-border: #b8d0e8;
  --compose-bar-bg: linear-gradient(180deg, #fbfdff 0%, #eef5fe 100%);

  --hover-bg: #eaf3fd;
  --hover-border: #a8c8e8;
  --selected-bg: #cfe2f8;
  --selected-border: #7ba7d7;
  --group-text: #1f5faa;

  --dp-bg: #ffffff;
  --dp-border: #7ba7d7;
  --dp-radius: 4px;
  --dp-inner-radius: 2px;
  --dp-shadow: inset 0 0 0 1px #ffffff;

  --chat-bg: linear-gradient(180deg, #f2f8ff 0%, #e3eefb 100%);
  --tabstrip-bg: linear-gradient(180deg, #dceafa 0%, #c9dcf3 100%);
  --tab-face: linear-gradient(180deg, #f4f9ff 0%, #dbe8fa 100%);
  --tab-face-hover: linear-gradient(180deg, #ffffff 0%, #e6f0fd 100%);
  --tab-face-active: #ffffff;
  --tab-border: #7ba7d7;
  --tab-text: #14507f;
  --tab-text-active: #0b3f75;
  --tab-radius: 4px;

  --to-bg: #eaf3fd;
  --to-border: #b8d0e8;
  --transcript-bg: #ffffff;
  --transcript-border: #7ba7d7;
  --transcript-radius: 3px;
  --tool-dir: row;

  --them-name: #1360b8;
  --me-name-color: #b8267a;
  --nudge-text: #c0392b;
  --card-bg: #f2f8ff;
  --card-border: #b8d0e8;

  --badge-bg: #e8951f;
  --badge-text: #ffffff;
  --ad-bg: linear-gradient(180deg, #fdf6e6 0%, #f6e6c2 100%);
  --ad-text: #7a5a20;
  --footer-bg: linear-gradient(180deg, #f4f9ff 0%, #dfeafa 100%);
  --footer-border: #b8d0e8;

  --error-bg: #fdeceb;
  --error-border: #e3a9a3;
  --error-text: #a02618;

  --toast-bg: linear-gradient(180deg, #ffffff 0%, #e8f1fc 100%);
  --toast-border: #1f6fc4;
  --toast-text: #16324f;
}

/* The 7.5 transcript is one line per message: bold colored name, colon,
   message. */
.skin-msn75 .line .who::after { content: ":"; }
.skin-msn75 .line .said { margin-left: 4px; }

/* The toolbar in 7.5 is an icon above its label. */
.skin-msn75 .chat-tool { flex-direction: column; gap: 1px; min-width: 54px; }
.skin-msn75 .chat-tool .ct-ico { width: 22px; height: 22px; }