/* ==========================================================================
   themes.css — everything the user can change from Display Properties:
   wallpapers, Windows colour schemes, and ICQ skins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wallpapers
   -------------------------------------------------------------------------- */

/* Declared on the bare class so an off-screen probe element can read
   --wallpaper back for the preview swatches. */

.wall-bliss {
  --wallpaper: linear-gradient(180deg,
      #1a5cbb 0%, #2f78d2 18%, #4a93e0 34%, #74b3ea 48%,
      #a3d0f2 60%, #cfe7f8 70%, #f2fbff 77%, #dcf0fb 82%, #b6dcf2 100%);
}

/* Clouds, then the rolling hill — drawn wherever .wall-bliss lands,
   which includes the little monitor in Display Properties. */
.wall-bliss::before {
  content: "";
  position: absolute;
  inset: 0 0 30% 0;
  background:
    radial-gradient(ellipse 22% 30% at 18% 34%, rgba(255, 255, 255, .85), transparent 65%),
    radial-gradient(ellipse 16% 22% at 33% 24%, rgba(255, 255, 255, .7), transparent 65%),
    radial-gradient(ellipse 26% 26% at 74% 28%, rgba(255, 255, 255, .75), transparent 65%),
    radial-gradient(ellipse 14% 18% at 88% 42%, rgba(255, 255, 255, .55), transparent 65%);
  pointer-events: none;
}

.wall-bliss::after {
  content: "";
  position: absolute;
  left: -34%;
  right: -34%;
  bottom: 0;
  height: 36%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #9ad155 0%, #7bbe3c 22%, #5ea228 55%, #46861c 100%);
  box-shadow:
    inset 0 8px 30px rgba(255, 255, 255, .45),
    0 -3px 26px rgba(90, 150, 40, .5);
  pointer-events: none;
}

.wall-azul {
  --wallpaper:
    radial-gradient(ellipse 70% 45% at 50% 58%, rgba(120, 190, 255, .45), transparent 70%),
    radial-gradient(ellipse 120% 70% at 15% 105%, #071f4a, transparent 70%),
    linear-gradient(160deg, #04122e 0%, #0b2a63 42%, #134f9f 72%, #2277d6 100%);
}

.wall-autumn {
  --wallpaper:
    radial-gradient(circle 90px at 76% 20%, #fff3cd 0%, #ffc861 55%, transparent 62%),
    radial-gradient(ellipse 90% 40% at 50% 100%, #3c1d12, transparent 75%),
    linear-gradient(180deg, #f7c977 0%, #e9974d 28%, #c95f34 52%, #7d3a22 78%, #3f1e13 100%);
}

.wall-redmoon {
  --wallpaper:
    radial-gradient(circle 58px at 71% 22%, #ffe2cd 0%, #ff9f70 58%, transparent 64%),
    radial-gradient(ellipse 110% 45% at 50% 104%, #24070c, transparent 72%),
    linear-gradient(180deg, #240a14 0%, #5c1420 34%, #a4321f 60%, #d3692c 76%, #3a120f 100%);
}

.wall-purple {
  --wallpaper:
    radial-gradient(ellipse 60% 40% at 50% 104%, rgba(255, 185, 225, .55), transparent 70%),
    radial-gradient(ellipse 45% 35% at 78% 18%, rgba(255, 220, 250, .25), transparent 70%),
    linear-gradient(180deg, #260c38 0%, #571c72 36%, #8e3aa8 66%, #c774c2 100%);
}

.wall-lagoon {
  --wallpaper:
    radial-gradient(ellipse 90% 45% at 50% 0%, #d3f7f2 0%, transparent 68%),
    linear-gradient(180deg, #86e6da 0%, #33b9ba 34%, #0d7f96 68%, #073f57 100%);
}

.wall-teal {
  --wallpaper: #008080;
}

.wall-slate {
  --wallpaper:
    radial-gradient(ellipse 80% 60% at 50% 20%, #6d7b8d 0%, transparent 70%),
    linear-gradient(180deg, #3f4854 0%, #2b323c 60%, #1b2028 100%);
}

/* A picture the user picked from their own machine. */
.wall-custom {
  --wallpaper: var(--wall-custom-img, #3a6ea5);
}

/* --------------------------------------------------------------------------
   Windows colour schemes
   -------------------------------------------------------------------------- */

/* Luna Blue is the default set in xp.css — nothing to override here. */

.theme-olive {
  --win-border: #6f7f4a;
  --win-border-inactive: #b0bd8e;
  --title-grad: linear-gradient(180deg,
      #92a463 0%, #b6c789 6%, #a6b874 12%, #96a862 20%, #8b9f56 45%,
      #7c9145 76%, #708538 88%, #657b2e 96%, #778b41 100%);
  --title-grad-inactive: linear-gradient(180deg,
      #bcc9a0 0%, #ced8b8 8%, #bcc9a0 40%, #acbb8f 88%, #a4b485 100%);
  --tbtn-grad: linear-gradient(180deg, #abbc7d 0%, #96aa62 45%, #7f9448 55%, #92a55f 100%);

  --taskbar-grad: linear-gradient(180deg,
      #8d9f5e 0%, #a9bb7e 8%, #93a666 14%, #889b5c 22%,
      #7f9353 88%, #61743a 95%, #586a34 100%);
  --taskbar-border: #61743a;
  --taskbar-hi: #b5c68b;
  --taskbtn-grad: linear-gradient(180deg, #a4b675 0%, #91a561 12%, #849859 55%, #7a8e50 100%);
  --taskbtn-active-grad: linear-gradient(180deg, #6c8043 0%, #64783d 40%, #7b9053 100%);
  --tray-grad: linear-gradient(180deg, #9fb271 0%, #95a967 8%, #889b5c 45%, #8da261 88%, #7d9252 100%);
  --tray-edge-dark: #6e8345;
  --tray-edge-light: #c2d399;

  --sm-header-grad: linear-gradient(180deg, #7f9353 0%, #9fb271 40%, #7f9353 100%);
  --sm-right-bg: #e5ebd3;
  --sm-footer-grad: linear-gradient(180deg, #9fb271 0%, #7f9353 50%, #687b40 100%);
  --sm-border: #61743a;
  --xp-selection: #7c9145;
  --legend-color: #4c6d21;
}

.theme-silver {
  --win-border: #a3a3b6;
  --win-border-inactive: #cbcbda;
  --title-grad: linear-gradient(180deg,
      #dcdce6 0%, #c6c6d5 10%, #b0b0c4 30%, #9c9cb3 58%, #8a8aa2 88%, #9d9db4 100%);
  --title-grad-inactive: linear-gradient(180deg,
      #dededf 0%, #ebebf0 8%, #d8d8e2 40%, #c6c6d3 88%, #bdbdcb 100%);
  --tbtn-grad: linear-gradient(180deg, #d8d8e3 0%, #bcbccd 45%, #a4a4b8 55%, #b8b8c9 100%);

  --taskbar-grad: linear-gradient(180deg,
      #f1f1f6 0%, #e0e0e9 8%, #cdcdda 14%, #c0c0cf 22%,
      #b4b4c5 88%, #9292a7 95%, #86869c 100%);
  --taskbar-border: #9292a7;
  --taskbar-hi: #fdfdff;
  --taskbar-fg: #1a1a2a;
  --taskbar-shadow: rgba(255, 255, 255, .65);
  --taskbtn-grad: linear-gradient(180deg, #ebebf1 0%, #d7d7e2 12%, #c6c6d4 55%, #b9b9c9 100%);
  --taskbtn-active-grad: linear-gradient(180deg, #adadc0 0%, #a3a3b7 40%, #bcbccb 100%);
  --start-grad: linear-gradient(180deg,
      #bcc8d9 0%, #a2b3c9 10%, #8ea3bd 40%, #7d95b1 55%, #6e88a6 88%, #8ea3bd 100%);
  --tray-grad: linear-gradient(180deg, #eeeef4 0%, #e0e0e9 8%, #cfcfdc 45%, #d6d6e1 88%, #c3c3d3 100%);
  --tray-edge-dark: #a6a6ba;
  --tray-edge-light: #fdfdff;

  --sm-header-grad: linear-gradient(180deg, #9c9cb3 0%, #b8b8ca 40%, #9c9cb3 100%);
  --sm-header-rule: #7f7f96;
  --sm-right-bg: #e9e9f0;
  --sm-footer-grad: linear-gradient(180deg, #c6c6d5 0%, #ababbf 50%, #9494a3 100%);
  --sm-border: #9292a7;
  --xp-selection: #5f6b8a;
  --legend-color: #45455f;
}

/* --------------------------------------------------------------------------
   ICQ skins
   -------------------------------------------------------------------------- */

/* ICQ Green is the default set in icq.css. */

.skin-blue {
  --icq-head-grad: linear-gradient(180deg, #fbfcff 0%, #dfeaf9 60%, #c9dcf3 100%);
  --icq-head-border: #9fbde0;
  --icq-accent: #12457f;
  --icq-accent-soft: #4a6f9c;
  --icq-group-grad: linear-gradient(180deg, #eef5fd 0%, #dae8f8 100%);
  --icq-group-fg: #1c4f86;
  --icq-group-border: #bcd3ec;
  --icq-group-count: #5a80aa;
  --icq-list-hover: #e2eefc;
  --icq-msg-head-grad: linear-gradient(180deg, #fbfcff 0%, #e4edf8 100%);
  --icq-msg-head-border: #bfd2e6;
  --icq-in-fg: #b23a00;
  --icq-out-fg: #0b4fa8;
  --icq-hero-grad: linear-gradient(180deg, #fff 0%, #e4eef9 45%, #c9dcf3 100%);
  --icq-hero-border: #9fbde0;
  --icq-hero-fg: #12457f;
  --icq-hero-sub: #4a6f9c;
}

.skin-sunset {
  --icq-head-grad: linear-gradient(180deg, #fffdf7 0%, #ffeed6 60%, #ffdcb0 100%);
  --icq-head-border: #e0b57f;
  --icq-accent: #8a4a10;
  --icq-accent-soft: #a8703a;
  --icq-group-grad: linear-gradient(180deg, #fff6e9 0%, #ffe9cd 100%);
  --icq-group-fg: #8a4a10;
  --icq-group-border: #ecd0aa;
  --icq-group-count: #a8703a;
  --icq-list-hover: #fff0dd;
  --icq-msg-head-grad: linear-gradient(180deg, #fffdf7 0%, #ffeada 100%);
  --icq-msg-head-border: #e3c39b;
  --icq-in-fg: #a8321f;
  --icq-out-fg: #0d5c8f;
  --icq-hero-grad: linear-gradient(180deg, #fff 0%, #ffeeda 45%, #ffd9a8 100%);
  --icq-hero-border: #e0b57f;
  --icq-hero-fg: #8a4a10;
  --icq-hero-sub: #a8703a;
}

.skin-bubblegum {
  --icq-head-grad: linear-gradient(180deg, #fffafd 0%, #fbe3f2 60%, #f6cbe7 100%);
  --icq-head-border: #dfa4c9;
  --icq-accent: #7a1f5c;
  --icq-accent-soft: #a3548a;
  --icq-group-grad: linear-gradient(180deg, #fdf0f8 0%, #f8ddef 100%);
  --icq-group-fg: #7a1f5c;
  --icq-group-border: #edc4de;
  --icq-group-count: #a3548a;
  --icq-list-hover: #fbeaf5;
  --icq-msg-head-grad: linear-gradient(180deg, #fffafd 0%, #f9e6f3 100%);
  --icq-msg-head-border: #e6bcd8;
  --icq-in-fg: #b0116d;
  --icq-out-fg: #4b2fb0;
  --icq-hero-grad: linear-gradient(180deg, #fff 0%, #fbe3f2 45%, #f5c3e3 100%);
  --icq-hero-border: #dfa4c9;
  --icq-hero-fg: #7a1f5c;
  --icq-hero-sub: #a3548a;
}

.skin-midnight {
  --icq-head-grad: linear-gradient(180deg, #3a4150 0%, #2b313d 60%, #232833 100%);
  --icq-head-border: #151a22;
  --icq-accent: #7fd2ff;
  --icq-accent-soft: #9aa7b8;
  --icq-group-grad: linear-gradient(180deg, #2f3542 0%, #272c37 100%);
  --icq-group-fg: #8fd8ff;
  --icq-group-border: #1b1f28;
  --icq-group-count: #7c8899;

  --icq-list-bg: #1e222b;
  --icq-list-fg: #dfe6ef;
  --icq-list-hover: #2b3240;
  --icq-list-offline-fg: #7c8899;
  --icq-uin-fg: #6f7b8b;
  --icq-unread-fg: #ff9d7a;

  --icq-msg-head-grad: linear-gradient(180deg, #3a4150 0%, #2b313d 100%);
  --icq-msg-head-border: #151a22;
  --icq-history-bg: #1e222b;
  --icq-history-fg: #dfe6ef;
  --icq-in-fg: #ff9d7a;
  --icq-out-fg: #7fd2ff;
  --icq-time-fg: #6f7b8b;
  --icq-sys-fg: #8b96a5;
  --icq-daysep-fg: #7c8899;
  --icq-daysep-line: #333a47;
  --icq-typing-bg: #262c36;

  --icq-field-bg: #161a21;
  --icq-field-fg: #e6ecf4;
  --icq-field-border: #3b4350;

  --icq-hero-grad: linear-gradient(180deg, #3d4453 0%, #2b313d 45%, #232833 100%);
  --icq-hero-border: #151a22;
  --icq-hero-fg: #8fd8ff;
  --icq-hero-sub: #9aa7b8;
}

/* Dark skins need the contact-list filter box to follow along. */
.cl-search input.xp {
  background: var(--icq-field-bg);
  color: var(--icq-field-fg);
  border-color: var(--icq-field-border);
}

/* --------------------------------------------------------------------------
   Display Properties dialog
   -------------------------------------------------------------------------- */

.monitor {
  width: 190px;
  margin: 0 auto 10px;
  padding: 12px 12px 6px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #e8e6da 0%, #cfccbd 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0, 0, 0, .25);
}

.monitor .screen {
  height: 108px;
  border: 2px solid #6b6b6b;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background: var(--wallpaper, #3a6ea5);
  background-size: cover;
  background-position: center;
}

.monitor .screen .mini-window {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 20%;
  width: 56%;
  height: 46%;
  border: 1px solid var(--win-border);
  border-top: 0;
  border-radius: 3px 3px 0 0;
  background: var(--xp-face);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
}

.monitor .screen .mini-title {
  height: 9px;
  border-radius: 2px 2px 0 0;
  background: var(--title-grad);
}

.monitor .screen .mini-taskbar {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11px;
  background: var(--taskbar-grad);
  border-top: 1px solid var(--taskbar-border);
}

.monitor .screen .mini-start {
  width: 26px;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--start-grad);
}

.monitor .stand {
  width: 44px;
  height: 9px;
  margin: 5px auto 0;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #cfccbd, #b6b3a4);
}

.picker {
  height: 122px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--xp-field-border);
}

.picker .opt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 7px;
  cursor: default;
}

.picker .opt:hover {
  background: #e8f0fb;
}

.picker .opt.selected {
  background: var(--xp-selection);
  color: #fff;
}

.picker .swatch {
  width: 34px;
  height: 18px;
  flex: 0 0 34px;
  position: relative;
  overflow: hidden;
  border: 1px solid #7a7a7a;
  background: var(--wallpaper, #3a6ea5);
  background-size: cover;
  background-position: center;
}

.picker .opt .sub {
  margin-left: auto;
  font-size: 10px;
  opacity: .75;
}

/* The file input is hidden; the XP button in front of it does the talking. */
.file-hidden {
  display: none;
}