* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

#simple-chat {
    display: flex;             /* flex layout */
    flex-flow: column;
    text-align: left;
    height: 100%;
    width: 100%;
    max-width: 700px;          /* Maximum width (leave width: 100%) */
    margin: 0 auto;
    padding: 1.3em .2em 2em;
    font-family: 'Inter', 'Noto sans', 'Roboto', 'sans-serif';
    line-height: 1.4;
}

/*  --- flex layout: elements inside the #simple-chat flex container --- */
#simple-chat h1 {
    flex: 0 1 auto;
}

#simple-chat #top-message {
    flex: 0 1 auto;
}

#simple-chat #chat-window {
    flex: 1 1 auto;            /* Fills all the available height */
    max-height: 650px;         /* Optional chat window max height */
    min-height: 150px;         /* Minimum chat window height */
}

#simple-chat #chat-form {
    flex: 0 1 auto;
}

/* For the demo page */
#simple-chat #bottom {
    flex: 0 1 auto;
}
/* ---------------------------------------------------------------- */

h1 {
    font-size: 1.6em;
    margin-bottom: .7em;
    text-align: center;
}

h1 img {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.15em;
}

/* Simple */
h1 span:first-of-type {
    color: #5099d7;
}

/* Chat */
h1 span:nth-of-type(2) {
    color: #56ba86;
}

#simple-chat #top-message {    /* Message at the top of the chat window */
    font-size: .85em;
    font-weight: bold;
    font-style: italic;
    background-color: #f9fcff; /* Top message background color */
    color: #3ea0b0;            /* Top message text color */
    text-align: center;
    padding: 5px 0;
    border: 2px solid #c0e3e9; /* Top message border color (same as #chat-window border color) */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-color: rgba(192, 227, 233, 0.5); /* Border between the top message and the chat window */
}

#simple-chat #chat-window {
    background-color: #fffff9; /* Chat window background color */
    list-style: none;
    padding: 6px 6px 10px 4px;
    border-left: 2px solid #c0e3e9; /* Chat window border color */
    border-right: 2px solid #c0e3e9;
    overflow: auto;
    overflow-wrap: break-word; /* Prevent horizontal scrollbar with long strings without space */
    display: flex;
    flex-direction: column;
}

#chat-window:before {          /* Push messages at the bottom if there's empty space (mobile friendly) */
    content: '';
    flex-grow: 1;
}

#simple-chat #chat-window li {

 /* If modified: also adjust
    .username text-indent
    and .username::before margin-right */
    margin-left: 1.6em;

    line-height: 1.2;
    margin-top: .8em;          /* Space between messages */
    color: #555;               /* Only applies to the colon between the name and the message and the loading text */
}

#simple-chat .date {
    display: block;
    font-size: .7em;
    color: #909090;            /* Date/time color */
}

#simple-chat .username {
    display: inline-block;
    font-weight: bold;
    color: #8b3050;            /* Username color */

 /* Also adjust #chat-window li margin-left
    and .username::before margin-right */
    text-indent: -1.5em;
}

#simple-chat .message {
    color: #30508b;            /* Message color */
}

#simple-chat .admin-username .username {
    color: #6082b6;            /* Admin username color */
}

#simple-chat .admin-username .message {
        color: teal;           /* Admin message color */
}

#simple-chat .system-username .username {
    color: #2e8b57;            /* System username color */
}

#simple-chat .system-username .message {
    color: #cd5700;            /* System message color */
}

#simple-chat .pending {
    opacity: .5;
}

#simple-chat #chat-form {
    position: relative;        /* For the #error-messages div and the #scroll-to-bottom button */
    width: 100%;
    background-color: #c0e3e9; /* Currently same color as #chat-window border color */
}

#simple-chat #form-elements {
    display: flex;
    align-items: center;
    padding: 6px;
}

#simple-chat #error-messages {
    display: none;
    color: red;
    background: #f7f7f7;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    padding: 1px 6px;
    position: absolute;        /* Relative to #chat-form */
    bottom: 44px;              /* Error messages position */
    left: 4px;
}

#simple-chat #user-icon,
#simple-chat input,
#simple-chat #send-button {
    display: inline-block;
    height: 30px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1em;
}

#simple-chat #user-icon {
    padding: .05em 5px 0;
}

#simple-chat #user-icon:hover {
    cursor: pointer;
}

#simple-chat input {
    padding: 0 5px;
    color: #656565;            /* Input fields text color */
    outline: none;
    background-color: #ffffff; /* Input fields background color */
}

#simple-chat input:focus {
    outline: 2px solid #2c727e;/* Focused field outline color */
}

#simple-chat #user-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #f5f7f5; /* Selected user icon background color */
}

#simple-chat input[name=name-field] {
    width: 23%;
    margin-right: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#msg-field-container {
    display: inline-block;
    width: 57%;
    margin-right: 8px;
}

#simple-chat input[name=message-field] {
    width: 100%;
}

#simple-chat input[name=password-field] {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

#simple-chat input::placeholder {
    color: #bbb;               /* Input fields placeholder text color */
}

#simple-chat #toggle-scrollbar,
#simple-chat #enable-sound {
    background: none;
    border: none;
    font: inherit;
    color: #fff;               /* Sound and toggle scrollbar icon color (scrollbar visible state) */
    cursor: pointer;
    width: auto;
    padding: 0 2px;
}

#simple-chat #toggle-scrollbar.disabled {
    color: #f5f5f5;            /* Toggle scrollbar arrow color (scrollbar hidden state) */
}

#simple-chat #toggle-scrollbar svg,
#simple-chat #enable-sound svg {
    vertical-align: -.3em;
}

#simple-chat #send-button {
    text-align: center;
    cursor: pointer;
  /*font-weight: bold;*/
    background: #3ea0b0;       /* Send button color */
    color: #fff;               /* Send button text color */
    text-shadow:               /* Send button text shadow */
      -1px -1px 0 #3994a4,
       1px -1px 0 #3994a4,
      -1px  1px 0 #3994a4,
       1px  1px 0 #3994a4;
    transition: background 0.15s ease;
    width: auto;
    padding: 0 10px;
    margin-left: 4px;
}

#simple-chat #send-button:hover {
    background: #51a9b7;       /* Hovered send button color */
    color: #fff;               /* Hovered send button text color */
}

#simple-chat #scroll-to-bottom {
    display: inline-block;
    position: absolute;        /* Relative to #chat-form */
    bottom: 70px;              /* Scroll to bottom button position */
    right: 25px;
    font-family: inherit;
    font-size: 16px;
    width: 36px;
    height: 36px;
    line-height: 16px;
    text-align: center;
    color: #3ea0b0;            /* Scroll to bottom button arrow color */
    background: rgba(243, 243, 243, 0.6);
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    cursor: default;
    opacity: 0;
    transform: scale(0);
    transition:
      opacity .3s ease,
      transform .3s ease;
}

#simple-chat #scroll-to-bottom.bottom-button-visible {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
}

#simple-chat #scroll-to-bottom svg {
    width: 16px;
    height: 16px;
    vertical-align: -.15em;
}

#simple-chat #bottom {
    text-align: center;
    color: #999;
    width: 90%;
    margin: 0 auto;
}

/* --- Iconify usernames --- */

/* Default/common */
#simple-chat .username::before {

 /* Space between the icon and the username: if modified
    also adjust #chat-window li margin-left
    and .username text-indent */
    margin-right: .3em;
    display: inline-block;
    content: "";
    background: url('icons/default.svg') no-repeat center / contain;
    width: 1.2em;              /* width must be equal for alignment */
    height: 1.2em;
    vertical-align: -.16em;
}

/* Admin username icon */
#simple-chat .admin-username .username::before {
    background-image: url('icons/admin.svg');
    height: 1.1em;
    vertical-align: -.19em;
}

/* System username icon */
#simple-chat .system-username .username::before {
    background-image: url('icons/system.svg');
    vertical-align: -.06em;
}

/*
 -== User selectable icons ==-

 Each icon must be defined by a class
 followed by .username::before as below.
 class and file name must be the same.
 Specify background-image (the icon)
 and optionally vertical-align
*/

/* Man */
#simple-chat .mn .username::before {
    background-image: url('icons/mn.svg');
    vertical-align: -.25em;
}

/* Woman */
#simple-chat .wm .username::before {
    background-image: url('icons/wm.svg');
    height: 1.1em;
    vertical-align: -.13em;
}

/* Dog */
#simple-chat .dg .username::before {
    background-image: url('icons/dg.svg');
    vertical-align: -.25em;
}

/* Cat */
#simple-chat .ct .username::before {
    background-image: url('icons/ct.svg');
    vertical-align: -.25em;
}

/* Tiger */
#simple-chat .tg .username::before {
    background-image: url('icons/tg.svg');
    vertical-align: -.24em;
}

/* Lion */
#simple-chat .ln .username::before {
    background-image: url('icons/ln.svg');
    vertical-align: -.21em;
}

/* Cow */
#simple-chat .cw .username::before {
    background-image: url('icons/cw.svg');
    vertical-align: -.20em;
}

/* Bear */
#simple-chat .br .username::before {
    background-image: url('icons/br.svg');
    vertical-align: -.24em;
}

/* Panda */
#simple-chat .pd .username::before {
    background-image: url('icons/pd.svg');
    vertical-align: -.20em;
}

/* Koala */
#simple-chat .kl .username::before {
    background-image: url('icons/kl.svg');
    vertical-align: -.22em;
}

/* Fox */
#simple-chat .fx .username::before {
    background-image: url('icons/fx.svg');
    vertical-align: -.22em;
}

/* Wolf */
#simple-chat .wf .username::before {
    background-image: url('icons/wf.svg');
    vertical-align: -.22em;
}

/* Pig */
#simple-chat .pg .username::before {
    background-image: url('icons/pg.svg');
    vertical-align: -.20em;
}

/* Monkey */
#simple-chat .mk .username::before {
    background-image: url('icons/mk.svg');
    vertical-align: -.22em;
}

/* Hamster */
#simple-chat .hs .username::before {
    background-image: url('icons/hs.svg');
    vertical-align: -.15em;
}

/* Mouse */
#simple-chat .ms .username::before {
    background-image: url('icons/ms.svg');
    vertical-align: -.23em;
}

/* Rabbit */
#simple-chat .rb .username::before {
    background-image: url('icons/rb.svg');
    vertical-align: -.15em;
}

/* Frog */
#simple-chat .fg .username::before {
    background-image: url('icons/fg.svg');
    vertical-align: -.18em;
}

/* Flower 1 */
#simple-chat .fl01 .username::before {
    background-image: url('icons/fl01.svg');
    vertical-align: -.22em;
}

/* Flower 2 */
#simple-chat .fl02 .username::before {
    background-image: url('icons/fl02.svg');
    vertical-align: -.22em;
}

/* Flower 3 */
#simple-chat .fl03 .username::before {
    background-image: url('icons/fl03.svg');
    vertical-align: -.22em;
}

/* ---------- User Icon Selection ---------- */

/* Popup container */
#simple-chat #icon-popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

/* Popup content */
#simple-chat #popup-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.4em, 1fr));
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    padding: 1.4em;
    gap: 1.6em;
    max-width: 300px;
}

#simple-chat #popup-content img {
    width: 2.4em;
    height: 2.4em;
    cursor: pointer;
    transition: transform 0.2s;
}

#simple-chat #popup-content img:hover {
    transform: scale(1.1);
}

/* Close button */
#simple-chat #close-button {
    color: #aaa;
    font-size: 28px;
    padding-left: 9px;
    font-weight: bold;
}

#simple-chat #close-button:hover,
#simple-chat #close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Toast message (no toaster effect) */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;                   /* Horizontal center */
    transform: translateX(-50%); /* Move back half its width */
    font-family: sans-serif;
    font-size: .9em;
    background-color: #333;
    color: white;
    padding: 8px 10px;
    border-radius: 5px;
    z-index: 1000;
    opacity: 0.9;
}

/* ------- Hide scrollbar ------ */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* ----------------------------- */

@media (max-width: 480px) {
    #simple-chat {
        padding: .4em 0 0;
    }

    h1 {
        font-size: 1.4em;
        margin-bottom: .3em;
    }

    #form-elements {
        padding: 5px;
        font-size: .9em;
    }

    /*
    Make the send button disappear on small screens.
    Virtual keyboards will have a "Send" button with
    enterkeyhint="Send" in the input field (don't
    translate enterkeyhint="Send", the OS translates it)
    */
    #simple-chat #send-button {
        display: none;
    }

    #simple-chat #toggle-scrollbar {
        padding: 0 2px 0 8px;
    }

    #simple-chat #bottom {
        margin-top: .4em;
        margin-bottom: .4em;
    }
}

/* Link CSS for the demo page, can be removed */
a {
    color: #0e67c9;
    text-decoration: none;
}

a:hover {
    color: #1a5392;
    background-color: #ffffcc;
    border-bottom: 1px dotted currentColor;
}