.chat-content-holder {
    position: relative;
    transition: all 250ms ease-in-out;
    transform-origin: 100% center;
}
#layoutChat {
    display: flex;
    flex-direction: column;

    color: var(--clr-pri);
    font-size: calc(14px * var(--ui-scale));
    line-height: 1.2;
    gap: calc(10px * var(--ui-scale));
    height: 100%;
    width: 100%;

    transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
    transform-origin: 100% center;
    /* NOTE new way of chat layout for landscape handled just below this, that allows a cleaner "slide in" animation */
}
.landscape #layoutChat {
    /* NEW way, that allows us to "slide in" the chat contents, without changing the scale of them, as we did before.
    But for the game/popup content to change in width we still use the width/size of chat-content-holder,
    as before - this is essentially just a hack that allows us to "slide in" the content only, without affecting the rest!
    */
    position: absolute;
    width: calc((250px - 40px) * var(--ui-scale));
    height: auto;
    left: calc(20px * var(--ui-scale));
    bottom: calc(5px * var(--ui-scale));
    top: calc(20px * var(--ui-scale));
    right: calc(20px * var(--ui-scale));
}
.portrait .is-overlayed #layoutChat,
.portrait .is-overlayed #layoutChat .chat-message {
    font-size: calc(25px * var(--ui-scale));
}
/* CHAT HEADER */
.chat-header {
    position: relative;
    left: calc(-20px * var(--ui-scale));
    right: calc(-20px * var(--ui-scale));
    width: calc(100% + 40px * var(--ui-scale));
    padding-bottom: calc(15px * var(--ui-scale));
    border-bottom: calc(3px * var(--ui-scale)) solid white;
    margin-bottom: calc(5px * var(--ui-scale));
}
.chat-header > div {
    margin: 0 calc(20px * var(--ui-scale));
}
.chat-header .chat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: calc(25px * var(--ui-scale));
    font-weight: bold;
    text-align: center;
    margin-top: calc(20px * var(--ui-scale));
    text-transform: uppercase;
}
.chat-header .chat-title .fa-solid {
    font-size: 0.8em;
    cursor: pointer;
    margin-right: 0.15em;
}
.chat-header .chat-title .fa-solid:hover {
    transform: scale(1.05);
}
.chat-header .chat-title .discord-link:hover {
    transform: scale(1.05);
}
.chat-header .chat-title .discord-link {
}
.chat-header .chat-title a.discord-link {
    color: white;
    text-decoration: none;
    opacity: 0; /* hide on desktop without affecting layout*/
    pointer-events: none;
}
.portrait .chat-header .chat-title a.discord-link {
    opacity: 1;
    pointer-events: auto;
}
.chat-header .chat-title .fa-brands {
    color: #5562ea;
}
.game-content-holder .btn.pp-discord {
    background: url('../images_nonopt/icons/pp_discord_sidebar.png');
    background-size: 100% 100%;
}
/*
.table-type-public .chat-title {
    font-size: calc(28px * var(--ui-scale));
}*/
.chat-header .special-event-note {
    margin-bottom: 1em;
}
.chat-header .special-event-note.cyan-variant a {
    color: #45e7ff;
}
.chat-header .special-event-note .yellow-text {
    color: yellow;
}
.chat-header .special-event-note .yellow-text {
    color: yellow;
}
.chat-header .logo-img-holder {
    margin-bottom: calc(20px * var(--ui-scale));
}
.chat-header .logo-img-holder img {
    max-width: 100%;
}
.chat-header .game-info {
    display: flex;
    /*justify-content: space-evenly;*/

    gap: calc(7px * var(--ui-scale));
    font-size: 1em;
    text-align: left;

    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    font-weight: bold;
    text-transform: uppercase;
}
.chat-header .game-info span {
    /*display: block;*/
    /*font-size: 2.5em;*/
    margin-left: 0.5em;
    font-weight: normal;
    text-transform: none;
}
.chat-header .game-info .discord-link {
    flex-grow: 1.5;
}
.chat-header .game-info .discord-link a {
    display: block;
    color: white;
    text-decoration: none;
}
.chat-header .game-info .discord-link a span {
    font-size: 1em;
    font-weight: normal;
}
.chat-header .game-info .fa-brands{
    font-size: 2.5em;
    margin: 0.1em 0 0.08em 0;
    color: #5562ea;
}

    /* CHAT CONTENT */
.chat-content {
    flex: 1;
}
#game_content .chat-content.scroll-holder {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    margin-left: 0;
}
.chat-content .messages {
    user-select: text;
    -webkit-user-select: text; /* webkit (safari, chrome) browsers */
    -moz-user-select: text; /* mozilla browsers */
    -khtml-user-select: text; /* webkit (konqueror) browsers */
    -ms-user-select: text; /* IE10+ */
}
.portrait .chat-content-holder.is-overlayed .chat-content .messages {
    padding: 0 calc(10px * var(--ui-scale));
}
.chat-content .messages .message {
    position: relative;
    margin-bottom: calc(12px * var(--ui-scale));
    line-height: 1.43;

    word-break: break-word;
}
.chat-content .messages .message.is-muted {
    /*background: #5a5a19; !* TODO just for testing visually *!*/
    display: none;
}
.chat-content .message .msg-sender:hover {
    cursor: pointer;
}
.chat-content .message .message-actions {
    display: none;
}
.chat-content .message.is-selected .message-actions,
.chat-content .message:hover .message-actions {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    padding: calc(3px * var(--ui-scale));
    background: black;
    color: white;
    font-size: 0.8em;
}
.chat-content .message .message-actions i {
    margin-left: calc(3px * var(--ui-scale));
}
.chat-content .message .message-actions i:hover {
    cursor: pointer;
    transform: scale(1.1);
}
.chat-content-holder.mute-all-chat .chat-content .messages .message:not(.lobby_notification) {
    display: none;
}
.chat-content .messages .message img {
    /*max-width: calc(14px * var(--ui-scale));
    max-height: calc(14px * var(--ui-scale));*/
    max-width: 1.2em;
    max-height: 1.2em;
}
.chat-content .messages .message img.medium-emoji-img {
    max-width: 1.5em;
    max-height: 1.5em;
    vertical-align: middle;
}
.chat-content .messages .message img.large-emoji-img {
    max-width: 2em;
    max-height: 2em;
    vertical-align: middle;
}
.chat-content .messages .message > span > span {

}
.chat-content .messages .message > span > span.developer {
    color: var(--clr-yellow);
    font-weight: normal !important;
    font-size: 0.9em;
}
.chat-content .messages .message > span > span.mod {
    color: var(--clr-green);
    font-weight: normal !important;
    font-size: 0.9em;
}
.chat-content .messages .message > span > span .pp-icon {
    background: url('../favicon-32x32.png?v=2');
    background-size: 100% 100%;

    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-top: -0.1em;
}
.chat-content .messages .message > span > span.mod .pp-icon {
    filter: hue-rotate(100deg);
}
.chat-content .messages ul {
    padding-left: calc(20px * var(--ui-scale));
    margin: 0;
    font-size: 0.8em;
}
/*
.chat-content .messages .message.lobby_notification {
    padding: 2px 5px;
    background: rgba(255,255,255,0.3);
}
.chat-content .messages .message.lobby_notification.single-win {
    background: var(--clr-green3);
}
.chat-content .messages .message.lobby_notification.tie {
    background: #826612;
}
.chat-content .messages .message.lobby_notification.admin-transfer {
    padding: 2px 5px;
    color: black;
    background: rgb(221 188 0);
}*/
.chat-content .messages .message.system_message {
    padding: 2px 5px;
    background: rgba(255,255,255,0.3);
    border: 1px solid red;
}
/* CHAT FOOTER */
.chat-footer {
    position: relative;
    display: none;
}
#game_content[data-player-play-state]:not([data-player-play-state="requesting_seat"]) .chat-footer,
#game_content[data-player-room-role="admin"] .chat-footer {
    /* unhide it when status is not watching*/
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(5px * var(--ui-scale));
}
.portrait .is-overlayed .chat-footer {
    /*padding-right: 6em; *//* make space for collapse icon */
}
.chat-footer .chat-error {
    /*position: absolute;
    bottom: -1.5em;
    left: 0;*/

    color: var(--clr-red);
    font-size: 0.8em;
    text-align: left;
    min-height: 1.2em;
}
.chat-footer .chat-error a {
    color: var(--clr-yellow);
}
.chat-footer .chat-error.login-to-chat {
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    margin-top: 0.3em;
    margin-bottom: 1.2em;
}
.portrait .chat-footer .chat-error.login-to-chat {
    margin-top: 0.5em;
}
.chat-footer .chat-error.login-to-chat a {
    color: #46b6ff;
}
.chat-footer .login-to-chat,
.chat-footer .chatmuted-error {
    display: none;
}
.chat-content-holder.show-login-to-chat .chat-footer .login-to-chat,
.chat-content-holder.mute-all-chat .chat-footer .chatmuted-error {
    margin-bottom: 1em;
    display: block;
}
.chat-content-holder.mute-all-chat .chat-footer > div:not(.chatmuted-error):not(.login-to-chat) {
    display: none;
}
/* login condition is the most important than others */
.chat-content-holder.show-login-to-chat .chat-footer > div:not(.login-to-chat) {
    display: none;
}
.chat-footer .icons-holder {
    position: absolute;
    top: calc(10px * var(--ui-scale));
    right: calc(10px * var(--ui-scale));
    bottom: calc(10px * var(--ui-scale));

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}
.portrait .chat-footer .icons-holder {
    top: calc(10px * var(--ui-scale));
    bottom: calc(10px * var(--ui-scale));
}
.chat-footer .icon.emojis {
    /*text-shadow: 1px 1px 0 black, -1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black;*/
    background: url('../images/misc/grinning_icon.png');
    background-size: 100% 100%;
    width: calc(25px * var(--ui-scale));
    height: calc(25px * var(--ui-scale));
}
.chat-footer .icon {
    width: auto;
    height: auto;
    font-size: calc(25px * var(--ui-scale));
    color: #000000;
}
.chat-footer .icon:hover {
    cursor: pointer;
}
.chat-footer .chat-message-wrapper {
    position: relative;
    display: flex;
}
.chat-footer .chat-message {
    flex: 5 1 auto;
    min-width: 70px;
    padding: calc(5px * var(--ui-scale));
    border-radius: calc(10px * var(--ui-scale));
    border: calc(2px * var(--ui-scale)) solid var(--clr-grey);
    padding-right: calc(40px * var(--ui-scale));
    font-family: var(--font-fam-reg);
    font-weight: 600;
    font-size: calc(12px * var(--ui-scale));
    resize: none;
}
.chat-footer .chat-message:disabled {
    /* override defautl disabled behaviour, which messes up when hdiing keyboard*/
    background: #fff;
    color: #000;
}

.portrait .chat-footer .chat-message {
    padding-right: calc(70px * var(--ui-scale));
    border-radius: calc(15px * var(--ui-scale));
    padding-left: calc(10px * var(--ui-scale));
}
.portrait .chat-footer .icons-holder {
    font-size: calc(60px * var(--ui-scale));
    right: calc(10px * var(--ui-scale));
}
.portrait .chat-footer .icons-holder .icon {
    font-size: calc(60px * var(--ui-scale));
}
.portrait .chat-footer .icons-holder .icon.emojis {
    width: calc(60px * var(--ui-scale));
    height: calc(60px * var(--ui-scale));
}
.picmo__popupContainer.my-emoji-picker {
    z-index: 21; /* so it goes over chat*/
}
/* CHAT secodnary footer */
.chat-content-holder .chat-secondary-footer,
.portrait .chat-content-holder .chat-secondary-footer {
    display: none;
}
/*.portrait #game_content .chat-content-holder.is-overlayed .chat-header,*/
.portrait #game_content .chat-content-holder.is-overlayed .chat-content,
.portrait #game_content .chat-content-holder.is-overlayed .chat-footer {
    max-width: 80%;
    width: 80%;
    margin: auto;
}
.portrait #game_content .chat-content-holder.is-overlayed .chat-header {
    margin-bottom: calc(50px * var(--ui-scale));
    left: calc(-20px * var(--ui-scale));
    right: calc(-20px * var(--ui-scale));
    width: calc(100% + 40px * var(--ui-scale));
    padding-bottom: 0;
}
.portrait .chat-header > div {
    width: calc(calc(100% - calc(40px * var(--ui-scale))) * 0.8);
    margin: auto;
}
.portrait .chat-content-holder.is-overlayed .chat-header .chat-title {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(20px * var(--ui-scale));
    margin-top: calc(24px * var(--ui-scale));
    font-size: calc(60px * var(--ui-scale));
}
.portrait .chat-content-holder.is-overlayed .chat-header .chat-title.small-text {
    /*font-size: calc(20px * var(--ui-scale));*/
}
.portrait .chat-content-holder.is-overlayed .chat-header .logo-img-holder {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(30px * var(--ui-scale));
    margin-top: calc(30px * var(--ui-scale));
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info {
    font-size: 1em;
    text-align: center;
    font-weight: 600;
    gap: calc(9px * var(--ui-scale));
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info .flex-column {
    flex: 0 1 10ch;
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info span {
    /*font-size: 2em;*/
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info .discord-link a span {
    font-size: 1em;
    font-weight: 600;
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info .fa-brands {
    /*font-size: 2em;*/
}
.portrait .chat-content-holder.is-overlayed .chat-header .game-info .room-title {
    margin-top: calc(5px * var(--ui-scale));
}
.portrait .chat-content-holder.is-overlayed .chat-content {
}
.portrait .chat-content-holder.is-overlayed .chat-content .message {
    font-size: 1.1em;
}
.portrait .chat-content-holder.is-overlayed .chat-secondary-footer {
    position: relative;
    display: flex;
    height: 5rem;
    justify-content: flex-end;
    align-items: center;
}
.portrait .chat-content-holder.is-overlayed .collapse-chat {
    position: absolute;

    /* this aligns it the same way as during game */
    right: calc(1rem - 20px * var(--ui-scale));
    bottom: calc(-17px * var(--ui-scale));
    font-size: 5rem;
    cursor: pointer;
    width: auto !important;
    height: auto !important;
}

.picmo__popupContainer {
    z-index: 10;
}

/* chat widget collapse */
.chat-toggle-widget {
    position: absolute;
    top: 0;
    bottom: 0;
    /*left: calc(-34px * var(--ui-scale));*/
    left: calc(-38px * var(--ui-scale));

    margin: auto 0;
    padding: calc(10px * var(--ui-scale)) calc(8px * var(--ui-scale));

    height: max-content;
    background: #000000;

    color: white;
    border-top-left-radius: calc(7px * var(--ui-scale));
    border-bottom-left-radius: calc(7px * var(--ui-scale));
    font-size: 2.5em;
}

.is-dark-lobby-background .chat-content-holder .chat-toggle-widget {
    /*background: var(--clr-green3);*/
    background: #ffffff;
    color: #000000;
}
.is-dark-lobby-background .chat-content-holder.collapsed .chat-toggle-widget {
    /*background: var(--clr-green3);*/
    background: #ffffff;
    color: #000000;
}
.chat-content-holder.collapsed .chat-toggle-widget {
    left: calc(-60px * var(--ui-scale));
    padding: calc(10px * var(--ui-scale));
}
.chat-toggle-widget:hover {
    cursor: pointer;
}
.chat-toggle-widget .expand {
    display: none;
}
/* changes for layout when chat is colalpsed */
.landscape .chat-content-holder.collapsed {
    width: 0 !important;
    flex-basis: 0 !important;
    padding: 0 !important;
}
.landscape .chat-content-holder.collapsed .chat-toggle-widget .expand {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.landscape .chat-content-holder.collapsed .chat-toggle-widget .collapse {
    display: none;
}
.landscape .chat-content-holder.collapsed #layoutChat {
    /* No longer needed as we adjusted #layoutChat in line 6, to work differently now to allow for "slide in" animation.
     For now still leaving here for reference, for a while.
     */
    /*
    transform: scaleX(0);
    opacity: 0;*/
}