/* Все стили виджета определены в этом файле.

   CSS-переменные не поддерживаются в старых браузерах (любой Internet Explorer),
   поэтому их я не использовал.

   Чтобы изменить отступы иконки чата от края экрана, найди в этом файле
   строку "Кнопка открытия чата" и, в первом же правиле, измени свойства
   'bottom' и/или 'right'.
*/

:root {--add_right: 4.5rem;} /* дополнительный отступ справа, если нужно под плагины */

#chat-widget {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 1rem;
    right:  1rem;
    z-index: 10;
    width: 19.5rem;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 10px;
	background-image: url('img/fon.jpg');

    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 1rem rgb(0 0 0 / 20%), inset 0 -1px 0 rgb(0 0 0 / 10%);
}

.msg  {color: black;}


/* # "ШАПКА" ЧАТА */

/* КНОПКА ЗАКРЫТИЯ ОКНА */

#chat-widget .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    box-sizing: content-box;
    width:  2.25rem;
    padding: .25rem;

    font-size: 2.25rem;
    color: #222;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: .5;
}

#chat-widget .close-btn:focus,
#chat-widget .close-btn:hover {
    background-color: transparent;
    color: #666;
}


/* ОПЕРАТОР */

#chat-widget header {
    background-color: #eee;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
}

#chat-widget .operator {
    display: flex;
    align-items: center;
}

/* Фото */

#chat-widget .operator-link {
    width:  4rem;
    height: 4rem;
}

#chat-widget .operator-pic {
    height: 100%;
    width:  100%;
    border-radius: 2rem;
    user-select: none;
    pointer-events: none;
}

/* Имя, должность и статус */

#chat-widget .operator-text {
    padding: .5rem 0 .5rem 1rem;
    margin-right: 2.25rem;  /* 2.25rem -- ширина кнопки закрытия */
    font-size: .75rem;
    color: #222;
}

#chat-widget .operator-name {
    font-weight: bold;
}

#chat-widget .operator-position {
    font-size: .75rem;
    color: #161616;
}

#chat-widget .online-status {
    display: flex;
    align-items: center;
    padding: 0 .25rem .3rem;
}

#chat-widget .online-status .indicator {
    background-color: #5ae5a2;
    border-radius: 50%;
    width:  .8rem;
    height: .8rem;
}

#chat-widget .online-status .text {
    padding-left: .35rem;
    font-size: .75rem;
}


/* # ОБЛАСТЬ СООБЩЕНИЙ */

#chat-widget .message-area {
    min-height: 10rem;
    max-height: 22.5rem;
    overflow-y: auto;
}

/* ДАТА И ВРЕМЯ */

#chat-widget .date {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: .5rem 0 .25rem;

    color: #777;
    font-size: .8rem;
    text-transform: uppercase;
}

/* Декоративные полоски вокруг даты */
#chat-widget .date::after,
#chat-widget .date::before {
    background-color: #999;
    content: "";
    width: 5.75rem;
    height: 1px;
    margin-right: .75rem;
    margin-left:  .75rem;

    user-select: none;
    pointer-events: none;
}

#chat-widget .time {
    color: #444;
    font-size: .75rem;
    font-weight: bold;
    text-align: center;
}


/* СООБЩЕНИЯ */

#chat-widget .message-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style-type: none;
    padding: 0 1rem;
}

#chat-widget .msg {
    font-size: .7rem;
    font-weight: 400;
    border-radius: .25rem;
    padding: .5rem .8rem;
    margin-bottom: .25rem;
}

#chat-widget .operator-msg {
    background-color: white;
	border: 1px solid #dedede;
}

#chat-widget .user-msg {
    align-self: flex-end;
    background-color: #abffb7;
	border: 1px solid #dedede;
    max-width: 15rem;
}

/* Статусная строка ("оператор печатает...") */

#chat-widget .status-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem .5rem;
    font-size: .9rem;
    color: #555;
}

#chat-widget .status-bar .icon {
    height: 1.5rem;
}

#chat-widget .status-bar .text {
    padding-left: .25rem;
}

/* Правила ниже позволяют скрывать строку статуса, когда виджет закрыт или
 * находится в состоянии автозапуска, но не если он уже открыт */
#chat-widget .status-bar,
#chat-widget.is-closed .status-bar .icon,
#chat-widget.is-closed .status-bar .text,
#chat-widget.is-waking .status-bar .icon,
#chat-widget.is-waking .status-bar .text {
    visibility: hidden;
}


/* # ОТВЕТ ПОЛЬЗОВАТЕЛЯ */

#chat-widget .phone-form,
#chat-widget .response-form {
    background-color: #ececec;
    padding: 1rem;
    border-radius: 0 0 10px 10px;
}

/* Кнопка ответа */

#chat-widget button[type="submit"] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .5rem;
    background-color: #00ee22;
    border: .1rem solid #4d4d4d;
    border-radius: .25rem;
    color: #fff;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 400;
    height: 2.3rem;
    line-height: 2.1rem;
    letter-spacing: .1rem;
    padding: 0 1rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
	transition: .4s;
}

#chat-widget button:focus,
#chat-widget button:hover {
    background-color: #7afe8d;
    color: #fff;
    outline: 0;
	transition: .4s;
}

#chat-widget .icon-send {
    height: 1.15rem;
    width:  1.15rem;
    margin-right: .3rem;
}

/* Поля ввода сообщения и телефона */

#chat-widget input,
#chat-widget textarea {
    -webkit-appearance: none;
    background-color: #f6f6f6;
    border: .1rem solid #d1d1d1;
    border-radius: .4rem;
    box-shadow: none;
    box-sizing: border-box;
    padding: .6rem 1rem .7rem; /* This vertically centers text on FF, ignored by Webkit */
    width: 100%;
	font-size: .9rem;
}

#chat-widget input,
#chat-widget textarea:focus {
    border-color: #4db6ac;
    outline: 0;
}

#chat-widget textarea::placeholder {
    color: #aaa;
    letter-spacing: 1px;
}

#chat-widget input {
    color: #444;
    letter-spacing: 1px;
	font-size: .9rem;
}


/* ОШИБКИ */

.errors {
    margin: 0;
    background-color: #e6e6e6;
}

.error {
    color: firebrick;
    font-size: .9rem;
    padding: .5rem .75rem .5rem 0;
}


/* ЭЛЕМЕНТЫ, НЕ ОТОБРАЖАЕМЫЕ ПО УМОЛЧАНИЮ */

#chat-widget .chat-icon,
#chat-widget .tooltip-arrow,
#chat-widget .new-msg-counter,
#chat-widget .phone-form,
#chat-widget .init-message-list,
#chat-widget .post-message-list,
#chat-widget .final-message-list,
#chat-widget .message-area .close-btn {
    display: none;
}


/************************
 *** МОБИЛЬНАЯ ВЕРСИЯ ***
 ***********************/


@media (max-width: 576px) {

    #chat-widget {
        bottom: 0;
        right:  0;
        width:  100vw;
        height: 100vh;

        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 0;
        box-shadow: none;
    }

    header {
        align-self: start;
        flex-grow: 0;
        width: 100%;
    }

    footer {
        align-self: end;
        flex-grow: 0;
        width: 100%;
    }

    #chat-widget .message-area {
        flex-grow: 1;
        align-self: stretch;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}


/***********************************
 *** ВИДЖЕТ В ЗАКРЫТОМ СОСТОЯНИИ ***
 **********************************/

#chat-widget.is-closed {
    visibility: hidden;
}


/* Кнопка открытия чата */

#chat-widget.is-closed .operator-link {
    visibility: visible;
    position: fixed;
    bottom: .75rem;
    right:  calc(.5rem + var(--add_right));

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--color);
    border-radius: 50%;
    box-shadow: 0 0 1rem rgb(0 0 0 / 20%), inset 0 -1px 0 rgb(0 0 0 / 10%);
}

#chat-widget.is-closed .operator-pic {
    display: none;
}

#chat-widget.is-closed .chat-icon {
    display: block;
    height: 2.35rem;
    width:  2.35rem;

    user-select: none;
    pointer-events: none;
}



/*******************************************
 *** ВИДЖЕТ САМОСТОЯТЕЛЬНО "ПРОСЫПАЕТСЯ" ***
/******************************************/

#chat-widget.is-waking {
    visibility: hidden;
}


/* Картинка оператора */

#chat-widget.is-waking .operator-link {
    visibility: visible;
    position: fixed;
    bottom: .75rem;
    right:  calc(.5rem + var(--add_right));
}

#chat-widget.is-waking .operator-pic {
    border-radius: 50%;
    box-shadow: 0 0 1rem rgb(0 0 0 / 20%), inset 0 -1px 0 rgb(0 0 0 / 10%);
}
	

/* Сообщения */

#chat-widget.is-waking .message-area {
    visibility: visible;
    position: fixed;
    bottom: 1rem;
    right:  calc(5.5rem + var(--add_right));
    min-height: initial;

    display: flex;
    align-items: flex-end;
    cursor: pointer;
}

#chat-widget.is-waking .message-list {
    background-color: white;
    border: 1px solid #737373;
    border-radius: .25rem;
    margin: 0 .5rem;
    padding: 1rem 2.25rem .9rem 1rem;
}

#chat-widget.is-waking .message-list .operator-msg {
    background-color: transparent;
    padding: 0;
	background-color: none;
	border: none;
}


/* Стрелочка в сторону картинки оператора */

#chat-widget.is-waking .tooltip-arrow {
    visibility: visible;
    display: block;
    position: fixed;
    bottom: 2.85rem;
    right:  calc(5.75rem + var(--add_right));
    height: .5rem;
    width:  .5rem;
    background-color: #e9e9e9;
    border-top:   1px solid #ddd;
    border-right: 1px solid #ddd;
    transform: rotate(45deg);
}

/* Счетчик новых сообщений */

#chat-widget.is-waking .new-msg-counter {
    visibility: visible;
    position: fixed;
    bottom: 3.7rem;
    right:  calc(.2rem + var(--add_right));
    height: 1.25rem;
    width:  1.25rem;
    background-color: var(--color);
    border-radius: 50%;
	border: 1px solid white;

    display: flex;
    justify-content: center;
    align-items: center;
}

#chat-widget.is-waking .new-msg-counter .counter {
    color: white;
    font-size: .8rem;
    font-weight: bold;
    padding-bottom: 2px;
}

/* Кнопка закрытия */

#chat-widget.is-waking .message-area .close-btn {
    display: block;
    top: 0;
    right: .3rem;
    font-size: 1.75rem;
    padding: .1rem;
}


#chat-widget.is-waking .datetime-divider {
    display: none;
}