/* ==========================================================
   ICQ-style skin for Chatovod  |  Y2K / Win98-XP vibes
   Вставить в: Настройки чата -> Дизайн -> Свой CSS (custom.css)
   Все цвета вынесены в переменные - меняй под свой сайт.
   ========================================================== */

:root {
  --icq-green:       #4fa800;
  --icq-green-light: #8fe03a;
  --icq-green-dark:  #2f6e00;
  --icq-red:         #e8271c;   /* "исходящие" / ники */
  --icq-blue:        #0a3fc2;   /* "входящие" / ссылки */
  --xp-face:         #ece9d8;   /* классический бежевый XP */
  --xp-light:        #ffffff;
  --xp-shadow:       #aca899;
  --xp-dark:         #716f64;
  --xp-select:       #316ac5;
  --font:            Tahoma, "Segoe UI", Verdana, Arial, sans-serif;
}

/* ---------- Базовое ---------- */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
  background: var(--xp-face) !important;
  font: 11px/1.35 var(--font) !important;
  color: #000 !important;
  overflow: hidden;
}
* { box-sizing: border-box; }
a { color: var(--icq-blue); }
a:hover { color: var(--icq-red); }

/* Скроллбары в духе XP (Chrome/Edge/Opera) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#f4f2e8 0% 25%, #ffffff 0% 50%) 50% / 2px 2px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #c9d9fb, #a9c0f5 50%, #c9d9fb);
  border: 1px solid #7d94cf;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #dbe6ff, #bcd0fa 50%, #dbe6ff); }
::-webkit-scrollbar-button { background: #c9d9fb; border: 1px solid #7d94cf; height: 16px; width: 16px; }
* { scrollbar-color: #a9c0f5 #f4f2e8; }

/* ---------- Главный контейнер ---------- */
.chat {
  background: var(--xp-face) !important;
  border: 0 !important;
  height: 100% !important;
  font: normal 10pt tahoma
}

/* ---------- Шапка: тонкий ICQ-баннер ---------- */
.chatHeader { background: transparent !important; border: 0 !important; height: 0px !important}
.chatHeaderWrapper {
  background: linear-gradient(180deg, #b6f06a 0%, var(--icq-green) 55%, var(--icq-green-dark) 100%) !important;
  border-bottom: 0px solid var(--icq-green-dark) !important;
  padding: 0px 0px !important;
  height: 0px !important;
}
.chatTitle {
  color: #fff !important;
  font: bold 13px/20px var(--font) !important;
  text-shadow: 1px 1px 0 #1d4a00;
  letter-spacing: .5px;
  padding-left: 22px !important;
  /* цветочек ICQ из чистого CSS */
  background:
    radial-gradient(circle at 50% 50%, #ffe24a 0 2px, transparent 3px),
    radial-gradient(circle at 50% 18%, #ff3b30 0 3px, transparent 4px),
    radial-gradient(circle at 82% 40%, #ff3b30 0 3px, transparent 4px),
    radial-gradient(circle at 70% 80%, #ff3b30 0 3px, transparent 4px),
    radial-gradient(circle at 30% 80%, #ff3b30 0 3px, transparent 4px),
    radial-gradient(circle at 18% 40%, #ff3b30 0 3px, transparent 4px)
    no-repeat 0 50% / 18px 18px !important;
    margin: 1px 0 0 1px !important;
}
.chatTitle::after { content: " ✿ online"; font-weight: normal; font-size: 10px; opacity: .85; }

/* ---------- Меню как у Win98/XP ---------- */
.chatTopLine {
  background: var(--xp-face) !important;
  border-bottom: 1px solid var(--xp-shadow) !important;
  box-shadow: 0 1px 0 var(--xp-light) inset;
}
.chatTopLine a {
  color: #000 !important;
  text-decoration: none !important;
  padding: 2px 8px !important;
  font: 11px var(--font) !important;
}
.chatTopLine a:hover, .chatTopLine li:hover > a {
  background: var(--xp-select) !important;
  color: #fff !important;
}
.chatTopLine ul ul {
  background: #fff !important;
  border: 1px solid var(--xp-dark) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35) !important;
  padding: 2px !important;
}
.chatHeader .chatTopLine {top: 4px;}
.chatTopLine ul ul li a { padding: 3px 18px 3px 6px !important; display: block; }
.chatMenuItemWithSeparator { border-right: 1px solid var(--xp-shadow) !important; }
.chatMain {top: 0}
.chatPrivates {border: 0}
.chatMain .chatMessages, .chatMain .chatPrivateMessages {
    top: 26px; 
    background-color: #ffffff;
    border: 2px inset #fff !important;
    padding: 4px 6px !important;
}

/* ---------- Вкладки: как вкладки диалога ICQ ---------- */
.chatTabs { background: var(--xp-face) !important; border: 0 !important; padding: 0 !important; height: 26px;}
.chatTabs ul {top: 4px; z-index: 4;}
.chatTabsLeft, .chatTabsRight { display: none !important; }
.chatTab {
  background: linear-gradient(#fdfdfa, var(--xp-face)) !important;
  border: 1px inset #fff !important;
  border-bottom: 0 !important;
  border-radius: 4px 4px 0 0 !important;
  margin-right: 2px !important;
}
.chatTabs > ul > li.chatTab > a {
    background-color: unset;
}
.chatTab a { color: #000 !important; text-decoration: none !important; padding: 3px 12px !important; display: block; }
.chatTabActive {
  background: #fff !important;
  border-top: 0 !important;   /* XP-оранжевая полоска */
  position: relative; top: 1px;
}
.chatTabActive a { font-weight: bold; }
.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, .chatTabs > ul > li.chatTab > a.active {
    background-color: var(--xp-light);
}
.chatTabs > ul > li.chatTab.chatTabActive > a, .chatTabs > ul > li.chatTab > a:hover, .chatTabs > ul > li.chatTab > a.active {
    background-color: transparent;
}

/* ---------- Область сообщений: белая "история ICQ" ---------- */
.chatMain { background: var(--xp-face) !important; padding: 0 6px 6px !important;}
.chatMessages {
  background: #fff !important;
  border: 2px inset #fff !important;
  border-top-color: var(--xp-dark) !important;
  border-left-color: var(--xp-dark) !important;
  border-right-color: var(--xp-light) !important;
  border-bottom-color: var(--xp-light) !important;
  padding: 4px 6px !important;
  font: 12px/1.4 var(--font) !important;
  top: 26px;
}
.chatMessage {
  padding: 2px 0 2px 0 !important;
  border-bottom: 1px dotted #d8d8d0 !important;
  word-wrap: break-word;
  font-family: tahoma;
  font-size: 12px;
}
.chatMessage:hover { background: #f4f9e8; }

/* Время - серое, мелкое, моноширинное, как в логах ICQ */
.chatTime {
  color: #808080 !important;
  font: 10px "Courier New", monospace !important;
  margin-right: 5px !important;
}
.chatTime::before { content: "["; }
.chatTime::after  { content: "]"; }

/* Ник автора - красный жирный с двоеточием (как "исходящее" в ICQ) */
.chatMessage .chatUser,
.chatMessage a[onclick*="nick"] { color: var(--icq-red) !important; font-weight: bold; text-decoration: none; }
.chatMessage a.chatUser:hover { text-decoration: underline; }

/* Системные сообщения - зелёный курсив */
.chatSystemMessage {
  color: var(--icq-green-dark) !important;
  font-style: italic;
  background: #f1fbe3;
  border-left: 3px solid var(--icq-green) !important;
  padding-left: 6px !important;
}
.chatSystemMessage a { color: var(--icq-green-dark) !important; font-weight: bold; }

/* Приватные сообщения - голубой "уууу-ох" */
.chatPrivates { background: #eaf1ff !important; border: 0 !important; }

/* ---------- Список контактов справа (Contact List) ---------- */
.chatPeople {
  top: 26px !important;
  background: #fff !important;
  border: 2px inset #fff !important;
  padding: 0 !important;
}
.chatPeopleTitle {
  background: linear-gradient(#b6f06a, var(--icq-green)) !important;
  color: #fff !important;
  font: bold 11px var(--font) !important;
  text-shadow: 1px 1px 0 #1d4a00;
  padding: 3px 6px !important;
  border-bottom: 1px solid var(--icq-green-dark);
  margin: 0 !important;
}
.chatPeopleTitle::before { content: "\2740  "; }  /* ❀ */
.chatPeopleList { margin: 0 !important; padding: 2px 0 !important; list-style: none !important; }
.chatPeopleList li {
  padding: 2px 4px 2px 22px !important;
  position: relative;
  cursor: pointer;
}
.chatPeopleList li:hover { background: #F1FBE3 !important; }
.chatPeopleList li:hover a { color: var(--icq-blue) !important; }
/* зелёный цветочек онлайн вместо стандартной иконки пола */
.chatPeopleList li::before {
  content: "";
  position: absolute; left: 4px; top: 4px;
  width: 13px; height: 13px;
  background:
    radial-gradient(circle at 50% 50%, #fff200 0 2px, transparent 3px),
    radial-gradient(circle at 50% 22%, var(--icq-green-light) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 42%, var(--icq-green-light) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 78%, var(--icq-green-light) 0 3px, transparent 4px),
    radial-gradient(circle at 32% 78%, var(--icq-green-light) 0 3px, transparent 4px),
    radial-gradient(circle at 22% 42%, var(--icq-green-light) 0 3px, transparent 4px);
  filter: drop-shadow(0 0 1px var(--icq-green-dark));
}
.chatPeopleList .chatUserIcon { display: none !important; }
.chatPeopleList .chatUser { text-decoration: none !important; font-weight: bold; }
.chatPeopleList li[class*="away"]::before,
.chatPeopleList li.away::before { filter: grayscale(1) opacity(.7); }  /* статус "отошёл" */
.chatPopupMenuDiv2 { background-color: #ffffe1; border-radius: 4px; box-shadow: 3px 3px 0 rgba(0,0,0,.3); }

/* ---------- Нижняя панель ввода ---------- */
.chatFooter {
  background: var(--xp-face) !important;
  border-top: 1px solid var(--xp-light) !important;
  box-shadow: 0 -1px 0 var(--xp-shadow);
  padding: 4px 6px !important;
}
.chatSendLinksPanel a {
  color: var(--icq-blue) !important;
  font-size: 10px;
  margin-right: 8px;
}
.chatSendText, .chatInputText, #nick, #captcha-input {
  background: #fff !important;
  border: 2px inset #fff !important;
  border-top-color: var(--xp-dark) !important;
  border-left-color: var(--xp-dark) !important;
  border-right-color: var(--xp-light) !important;
  border-bottom-color: var(--xp-light) !important;
  font: 12px var(--font) !important;
  padding: 3px 4px !important;
  outline: none !important;
}
.chatSendText:focus { background: #fffff0 !important; }
.chatLinkGold { display: none; }
.chatLinkVip { display: none; }

/* ---------- Кнопки: плоские XP-кнопки ---------- */
input[type="button"], input[type="submit"], .chatSendButton, button {
  font: 11px var(--font) !important;
  color: #000 !important;
  background: linear-gradient(#ffffff, #ece9d8 85%, #d6d0c0) !important;
  border: 1px solid #003c74 !important;
  border-radius: 3px !important;
  padding: 3px 14px !important;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #fff;
}
input[type="button"]:hover, input[type="submit"]:hover, .chatSendButton:hover {
  box-shadow: inset 0 0 0 2px #f8b636;   /* оранжевый hover как в XP */
}
input[type="button"]:active, input[type="submit"]:active, .chatSendButton:active {
  background: linear-gradient(#d6d0c0, #ece9d8) !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.35);
}
.chatSendButton { font-weight: bold !important; border-color: var(--icq-green-dark) !important; }

select {
  font: 11px var(--font) !important;
  border: 1px solid #7f9db9 !important;
  background: #fff !important;
}

/* ---------- Смайлы ---------- */
.smilesBox {
    background: #ffffe1 !important;
    border-right: 1px solid #CFCFC9;
    border-top: 1px solid #CFCFC9;
    border-bottom: 1px solid #CFCFC9;
    border-radius: 4px;
    padding: 6px !important;
}
.smilesBox p { margin: 0px 0 !important; font-weight: bold; color: var(--icq-green-dark); display: none; }
.smilesBox a:hover { background: #cfe8ff; outline: 1px dotted #316ac5; left: 16px; }


/* ---------- Окно входа в чат (как диалог ICQ "Login") ---------- */
.chatFull .transparent { background: #3a6ea5 !important; opacity: .55 !important; }
.chatFull .content {
  background: var(--xp-face) !important;
  border: 2px outset #fff !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,.4);
  padding: 0 0 12px !important;
  width: 300px; margin: 0 auto;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.chatFull .content::before {          /* "заголовок окна" */
  content: "✿ ICQ — Вход";
  display: block;
  background: linear-gradient(180deg, #3d95ff 0%, #0058e6 8%, #0054e3 90%, #0a43b8 100%);
  color: #fff; font: bold 12px var(--font);
  padding: 4px 8px; margin-bottom: 12px;
  text-shadow: 1px 1px 0 #00298a;
}
.chatFull .content form { padding: 0 14px; }
.chatFull .content label { display: block; margin: 6px 0 2px; }
.chatFull .error { color: var(--icq-red) !important; font-weight: bold; }

/* ---------- Мелочи ---------- */
.chatMessages img { max-width: 100%; border: 0px solid var(--xp-shadow); }
::selection { background: var(--xp-select); color: #fff; }

/* Мигание нового сообщения (ностальгия по "uh-oh") */
@keyframes icq-flash { from { background: #fff7a8; } to { background: transparent; } }
.chatMessages .chatMessage:last-child { animation: icq-flash 1.2s ease-out; }

/* Узкий iframe: прячем список контактов */
@media (max-width: 520px) {
  .chatPeople { display: none !important; }
}