/* Chat widget specific layout and controls */

.widget-chatbox {
    background: url('https://i.gifer.com/V4uO.gif') center/cover repeat;
    border: 1px solid #ff00cc;
    padding: 14px;
    margin-top: 8px;
    box-sizing: border-box;
}

.chat-room-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

.chat-join,
.chat-live {
    border: 1px solid #ff00cc;
    padding: 18px 12px 12px;
    background: rgba(0, 0, 0, 0.68);
    border-radius: 10px;
    box-sizing: border-box;
    width: 100%;
    position: relative;
}

.chat-join h3 {
    position: absolute;
    top: -11px;
    left: 12px;
    margin: 0;
    padding: 2px 9px;
    border: 1px solid cyan;
    border-radius: 999px;
    background: #ff00cc;
    color: #000;
    font-size: 0.66rem;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
    text-transform: lowercase;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65);
}

.chat-status-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.76rem;
    color: cyan;
}

.chat-info-copy {
    margin-top: 8px;
    text-align: left;
    color: #9bd7ff;
    font-size: 0.56rem;
    line-height: 1.35;
}

.chat-info-copy p {
    margin: 0 0 4px;
}

#chatJoinForm.chat-input {
    flex-direction: column;
    margin-top: 4px;
}

#chatJoinForm input,
#chatForm textarea {
    width: 100%;
    box-sizing: border-box;
    background: #222;
    border: 1px solid cyan;
    color: white;
    padding: 9px 10px;
    font-size: 0.86rem;
}

#chatJoinForm input::placeholder,
#chatForm textarea::placeholder {
    color: #78f6ff;
    opacity: 0.9;
}

#chatForm {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

#chatForm textarea {
    resize: none;
    overflow-y: auto;
    min-height: 36px;
    max-height: 160px;
    line-height: 1.35;
    transition: min-height 0.16s ease, box-shadow 0.16s ease;
}

#chatForm.expanded textarea {
    min-height: 82px;
}

#chatSendBtn {
    width: 100%;
}

.chat-input {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.chat-input button {
    background: magenta;
    border: none;
    padding: 9px 12px;
    cursor: pointer;
}

#chatJoinForm button,
#chatGuestBtn,
#chatChangeIdentityBtn,
#chatForm button,
#chatInfoBtn {
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 0.58rem;
    line-height: 1.1;
    min-height: 26px;
}

#chatJoinForm button {
    background: linear-gradient(135deg, #ff00cc, #d100aa);
    border: 1px solid #ff90e6;
    color: #120812;
    width: 100%;
}

#chatJoinForm button:hover {
    background: linear-gradient(135deg, #f8f8f8, #9efeff);
    color: #001327;
}

#chatGuestBtn {
    width: 100%;
    margin-top: 8px;
    background: linear-gradient(135deg, #00d4ff, #51ffa8);
    border: 1px solid #a4fff6;
    color: #062014;
}

#chatGuestBtn:hover {
    background: linear-gradient(135deg, #ffe96b, #ffa55b);
    color: #291100;
}

#chatChangeIdentityBtn {
    width: auto;
    align-self: flex-start;
    margin: 6px 0 4px;
    padding: 4px 7px;
}

#chatIdentity,
#chatOnline {
    display: block;
    line-height: 1.1;
    white-space: nowrap;
}

#chatInfoBtn {
    width: auto;
    align-self: flex-start;
    margin-top: 8px;
    padding: 4px 7px;
    background: linear-gradient(135deg, #ff00cc, #8b00c7);
    border: 1px solid cyan;
    color: #fff;
    text-transform: lowercase;
}

#chatInfoBtn:hover {
    background: linear-gradient(135deg, #ffffff, #d4ffff);
    color: #061423;
}

.chat-messages {
    height: 170px;
    overflow-y: auto;
    font-size: 0.84rem;
    line-height: 1.45;
    padding: 10px;
    word-wrap: break-word;
    border: 1px solid rgba(0, 255, 255, 0.35);
    background: rgba(0, 0, 0, 0.56);
}

.chat-name {
    color: cyan;
    font-weight: bold;
}

.chat-messages p {
    margin: 7px 0;
    border-left: 2px solid magenta;
    padding-left: 8px;
}

#typingIndicator {
    min-height: 16px;
    color: #ffb3e6;
    text-align: left;
}