/* ----------------- TENDO CUSTOM THEME ----------------- */

/* Font setup */
@font-face {
    font-family: "MSGothic";
    src: url(/media/ms-gothic.ttf);
}

body {
    font-family: "Syne Mono", "MSGothic", monospace;
    color: #FFF;
}

/* Chat background */
#background, #settingsMenu {
    background: rgba(0,0,0,1);
}

/* Links */
a {
    color: #ff0015;
    text-decoration: none;
}

/* Top banner / chat header */
#top_banner {
    font-family: "Syne Mono", monospace !important;
    font-weight: bolder !important;
    background: black;
    width: calc(100% - 2px);
    border: solid 1px #000;
    box-shadow: 0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 2px #000,0 0 1px #000,0 3px 4px #000;
    text-shadow: 1px 1px 2px #005;
    position: relative;
}

/* Rename chat in top banner */
#top_banner::after {
    font-family: "Syne Mono", monospace;
    font-size: 12pt;
    color: #FFF;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* ----------------- MESSAGE BUBBLES ----------------- */
.allMessages {
    background: rgba(0,0,0,0.6) !important;
    border: 4px outset #000 !important;
    border-radius: 5px !important;
    box-shadow: -1px -1px 0 0 #fff,1px 1px 0 0 gray,0 0 0 2px #000,inset 0 0 0 1px #000 !important;
    margin: 0 20px !important;
    font-family: "Syne Mono", "MS PGothic", monospace !important;
    color: #FFF !important;
    image-rendering: pixelated !important;
}

.allMessages.pm {
    border-color: #fff !important;
}
.allMessages.pm:after {
    content: "Private Message";
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F55;
    color: #FFF;
    height: 16px;
    padding: 5px;
    position: absolute;
    right: 5vw;
    bottom: 100%;
    z-index: 5;
    border-radius: 5px 5px 0 0;
}

.allMessages.containsOnlyEmojis .emoji {
    height: 50px !important;
}

/* Spacing for messages */
.msgWrapper + .msgWrapper {
    margin-top: 25px;
    margin-bottom: 15px;
}

#timestamp {
    font-size: 8pt;
    margin-top: 10px !important;
    padding-left: 30px;
    color: #FFF;
}

/* ----------------- INPUT / TYPING BOX ----------------- */
#input, #nameEntry {
    background-color: #000 !important;
    color: #FFF !important;
    border: 1px solid #fff;
    border-radius: 0; /* sharp corners */
    padding: 8px 8px;
    margin-bottom: 10px;
    font-family: "MS PGothic", monospace !important;
    font-size: 9pt;
    outline: none;
    image-rendering: pixelated !important;
}

/* Placeholder text */
#input:empty::before {
    content: "send message [enter to send]";
    color: #CCC;
    font-family: "MS PGothic", monospace;
}

/* Hover/focus */
#input:hover, #nameEntry:hover {
    border-color: #fff;
}
#input:focus, #nameEntry:focus {
    border-color: #fff;
}

/* ----------------- TYPING INDICATOR ----------------- */
#is_typing {
    background-color: #000 !important;
    border: 1px solid #AAF;
    border-radius: 0;
    left: unset;
    right: 10px;
    bottom: 27px;
    padding: 4px 6px;
    overflow: visible;
    color: #FFF;
}
#is_typing:hover::after {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    content: "Someone is typing";
    font-size: 10pt;
    position: fixed;
    right: 35px;
    bottom: 0;
    width: 50vw;
    color: #FFF;
    z-index: 100000;
}
#is_typing > span {
    background-color: #fff;
    border-radius: 0;
    height: 2px;
    width: 2px;
}

/* Pixelate emojis */
.emoji, .emojiInGrid {
    image-rendering: pixelated !important;
}

/* ----------------- CUSTOM OWNER BADGE ----------------- */
.owner {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: transparent;   /* makes red block invisible */
    background-image: url('https://i.ibb.co/TMRZKSLw/cbdf1d8c.gif'); /* your custom badge image */
    background-size: cover;          /* ensures the image fills the 10x10 box */
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0;
    vertical-align: middle;
    margin-left: 2px;                /* smaller margin for tiny badge */
}
/* ----------------- SETTINGS ICON ----------------- */
#settings {
    display: block;                     /* ensure visible */
    width: 18px;                        /* adjust size as needed */
    height: 18px;
    background-image: url('https://i.ibb.co/ccyJxHVJ/settings.png') !important; /* custom icon */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);                  /* invert colors (white) */
    image-rendering: pixelated !important; /* pixelated style */
    transition: none;                   /* no spin animation */
    cursor: pointer;
}

/* ----------------- EMOJI TRAY ----------------- */
#emojiTray {
    background-color: #000;             /* black tray background */
    border: 1px solid #FFF;             /* optional white border */
    padding: 5px;
    display: none;                      /* hidden by default */
    position: absolute;                 /* so it can float above chat */
    bottom: 45px;                        /* adjust relative to input box */
    left: 10px;                         /* adjust horizontal placement */
    z-index: 1000;
}

/* ----------------- EMOJI TRAY TOGGLE INSIDE INPUT ----------------- */
#input {
    position: relative;                 /* to allow positioning inside */
    display: flex;
    align-items: center;
}

#emojiTrayToggle {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #FFF;             /* white background for toggle */
    background-image: url('https://i.ibb.co/YTwV00Tk/image.png') !important; /* emoji icon */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);                  /* make icon black on white */
    image-rendering: pixelated !important;
    cursor: pointer;
    margin-left: 5px;                   /* space from typing area */
    border: 1px solid #000;             /* optional black border for contrast */
    box-sizing: border-box;
}