/* =========================================
   MSN MESSENGER 7.5 — CHAT LAYOUT
   ========================================= */

/* Убираем стандартные отступы браузера.
   Высоту страницы делаем равной высоте окна,
   чтобы в будущем чат правильно работал в iframe. */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
}

/* Основной контейнер Messenger.
   Высота автоматически подстраивается под iframe. */
.msn-chat-window {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: #eef3fb;
}

/* Верхняя системная строка меню */
.msn-menu-bar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 24px;
    padding: 0 3px;
    background: #f4f2e8;
}

/* Пункты File / Edit / Actions / Tools / Help */
.msn-menu-button {
    border: 1px solid transparent;
    background: transparent;
    padding: 3px 6px;
    font: inherit;
    color: #000;
    cursor: default;
}

.msn-menu-button:hover {
    border-color: #a6a6a6;
    background: #ffffff;
}

/* =========================================
   MSN MESSENGER 7.5 — CHAT CONTENT
   ========================================= */

.msn-chat-content {
    flex: 1;
    min-height: 0;

    display: flex;
    flex-direction: column;

    /* Между историей и нижним блоком оставляем
       небольшой промежуток, как в оригинале.
       Панель инструментов и поле ввода
       соединяем без зазора. */
    gap: 0;

    padding: 10px;
}

/* История сообщений отделена от нижнего блока */
.msn-history-panel {
    margin-bottom: 8px;
}

/* Верхняя область истории сообщений */
.msn-history-panel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #6c84ae;
    border-radius: 5px 5px 0 0;
}

/* Прокрутка истории */
#chat-messages {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 8px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}

/* =========================================
   MSN MESSENGER 7.5 — LOWER TOOLBAR
   Собранный Photoshop-файл:
   toolbar_background.png (13x23)
   Слайс: 6px слева и 6px справа
   ========================================= */

.msn-toolbar-row {
    display: flex;
    align-items: center;
    gap: 8px;

    flex-shrink: 0;
    min-height: 23px;
    height: 23px;

    box-sizing: border-box;
    padding: 0 8px;

    border: 6px solid transparent;
    border-top: 0;
    border-bottom: 0;

    border-image-source: url("images/toolbar/toolbar_background.png");
    border-image-slice: 0 6 0 6 fill;
    border-image-width: 0 6px 0 6px;
    border-image-repeat: stretch;

    background: transparent;
}

.msn-identity-group {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 100%;
}

.msn-toolbar-label {
    white-space: nowrap;
    color: #000;
    line-height: 1;
}

.msn-nickname-input {
    width: 115px;
    height: 17px;
    min-width: 45px;
    box-sizing: border-box;

    padding: 1px 3px;
    border: 1px solid #7f9db9;
    background: #ffffff;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
}

.msn-color-input {
    width: 22px;
    height: 17px;
    padding: 0;
    border: 1px solid #7f9db9;
    background: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
}

.msn-emoticons-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    height: 19px;
    padding: 0 4px;
    box-sizing: border-box;

    border: 1px solid transparent;
    background: transparent;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000;

    cursor: pointer;
    white-space: nowrap;
}

.msn-emoticons-button:hover,
.msn-emoticons-button:active {
    background: #f2f5fb;
    border-color: #b7c8e8;
}



/* Оригинальная иконка без масштабирования */
.msn-emoticons-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Стрелка ToolbarCaret.
   Пока CSS-замена: точную отрисовку
   оригинального элемента проверим отдельно. */
.msn-emoticons-caret {
    width: 0;
    height: 0;

    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #446097;

    flex-shrink: 0;
}


/* Нижняя область ввода */
.msn-compose-row {
    display: flex;
    align-items: stretch;
    gap: 8px;

    flex-shrink: 0;

    /* Высота пока адаптирована под наш чат */
    height: 94px;
    min-height: 0;
    box-sizing: border-box;

    /* Отступы нашей адаптации */
    padding: 8px;

    /* Граница контейнера MSN 7.5 */
	border: 1px solid #446097;
	border-bottom: 0;
	border-radius: 0;

    background: #ffffff;
}

.msn-input-wrap {
    flex: 1;
    min-width: 0;
}

.msn-message-input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: transparent;

    /* Оригинальный вертикальный отступ
       содержимого — по 1 px */
    padding: 1px 0;

    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #000000;
}

/* Кнопка отправки */
.msn-send-wrap {
    display: flex;
    align-items: center;
}



/* =========================================
   MSN MESSENGER 7.5 — ORIGINAL SEND BUTTON
   UIFILE 920
   PNG 780 — Normal
   PNG 782 — Hover
   PNG 783 — Pressed

   Original border thickness: 7px
   ========================================= */

.msn-send-button {
    width: 58px;
    height: 37px;
    box-sizing: border-box;

    /* Оригинальная нарезка 9-slice.
       Углы сохраняют размер 7×7 px.
       Растягиваются только стороны и центр. */
    border: 7px solid transparent;

    border-image-source: url("images/send/send_normal.png");
    border-image-slice: 7 fill;
    border-image-width: 7px;
    border-image-repeat: stretch;

    background: transparent;

    /* Цвет текста из UIFILE */
    color: #2f4a8f;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;

    padding: 0;
    cursor: pointer;
}

/* Наведение — оригинальный PNG 782 */
.msn-send-button:hover {
    border-image-source: url("images/send/send_hover.png");
}

/* Нажатие — оригинальный PNG 783 */
.msn-send-button:active {
    border-image-source: url("images/send/send_pressed.png");
}

/* Клавиатурная фокусировка */
.msn-send-button:focus-visible {
    outline: 1px dotted #2f4a8f;
    outline-offset: -9px;
}