/*
 * Prenship Meet chat drawer
 * Chat layout only. No global modal or whiteboard changes.
 */

#chatRoom {
    position: fixed !important;
    z-index: 2147483000 !important;

    top: 74px !important;
    right: 18px !important;
    bottom: 88px !important;
    left: auto !important;

    width: 390px !important;
    max-width: calc(100vw - 36px) !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.46) !important;
    border-radius: 16px !important;

    background: #ffffff !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.26) !important;

    font-family: Arial, Helvetica, sans-serif !important;
    text-align: left !important;
}

/*
 * Do not override display on #chatRoom.
 * The original Meet JavaScript opens and closes it.
 */
#chatRoom .chat-app {
    position: relative !important;
    display: flex !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

/*
 * Meet toggles this list using inline display:flex/display:none.
 * Do not require an .open class because Meet never adds one.
 */
#chatRoom #plist {
    display: none;

    position: absolute !important;
    z-index: 20 !important;

    top: 56px !important;
    bottom: 58px !important;
    left: 0 !important;

    width: 250px !important;
    max-width: 75% !important;
    height: auto !important;

    flex-direction: column !important;

    padding: 8px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #f8fafc !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow:
        10px 0 24px rgba(15, 23, 42, 0.16) !important;
}

#chatRoom #chatContent,
#chatRoom .chat {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: #ffffff !important;
}

/* Header */

#chatRoom .chat-header {
    position: relative !important;
    flex: 0 0 56px !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;
    padding: 10px 148px 8px 12px !important;

    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;

    background: #f8fafc !important;
}

#chatRoom .chat-header .row,
#chatRoom .chat-header .col-12 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}

#chatRoom #attendeeName,
#chatRoom .chat-about {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 5px 0 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: #172033 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

#chatRoom .chat-header a {
    z-index: 10 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Messages */

#chatRoom #chatHistory,
#chatRoom .chat-history {
    flex: 1 1 auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 12px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    border: 0 !important;
    background: #ffffff !important;
}

#chatRoom #chatBoard {
    display: block !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#chatRoom #chatBoard > li {
    display: block !important;
    clear: both !important;

    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 0 !important;

    list-style: none !important;
}

#chatRoom .message-data {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: 100% !important;

    margin: 0 0 4px !important;
    padding: 0 3px !important;

    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

#chatRoom .message-data-time {
    padding: 0 !important;

    color: #7c8799 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

#chatRoom .message {
    position: relative !important;
    top: auto !important;

    display: block !important;
    float: none !important;

    width: fit-content !important;
    max-width: 86% !important;

    margin: 0 !important;
    padding: 9px 11px !important;

    color: #1f2937 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-align: left !important;

    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;

    border-radius: 13px !important;
}

#chatRoom .my-message {
    margin-right: auto !important;
    margin-left: 0 !important;

    background: #eef2ff !important;
    border-bottom-left-radius: 4px !important;
}

#chatRoom .other-message {
    top: auto !important;

    margin-right: 0 !important;
    margin-left: auto !important;

    background: #e8f7ef !important;
    border-bottom-right-radius: 4px !important;
}

#chatRoom .float-right {
    float: none !important;
}

#chatRoom .message::after {
    display: none !important;
    content: none !important;
}

/* Message input */

#chatRoom .chat-message {
    flex: 0 0 58px !important;

    width: 100% !important;
    height: 58px !important;

    margin: 0 !important;
    padding: 8px 10px !important;

    border-top: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
}

#chatRoom .chat-message .input-group {
    display: flex !important;

    width: 100% !important;
    height: 42px !important;

    margin: 0 !important;
}

#chatRoom .chat-message .input-group-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #172033 !important;
    background: #eef2f7 !important;
    border: 1px solid #aeb8c6 !important;
    border-radius: 9px 0 0 9px !important;
}

#chatRoom #chatMessage {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 8px 11px !important;

    color: #172033 !important;
    background: #ffffff !important;

    border: 1px solid #aeb8c6 !important;
    border-left: 0 !important;
    border-radius: 0 9px 9px 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    text-align: left !important;

    box-shadow: none !important;
}

/* Phone and small tablet */

@media (max-width: 680px) {
    #chatRoom {
        top: auto !important;
        right: 12px !important;
        bottom: 86px !important;
        left: 12px !important;

        width: auto !important;
        max-width: none !important;

        height: min(48vh, 460px) !important;
        max-height: 48vh !important;

        border-radius: 16px !important;
    }

    #chatRoom .chat-header {
        flex-basis: 54px !important;
        height: 54px !important;
        min-height: 54px !important;

        padding: 9px 144px 7px 11px !important;
    }

    #chatRoom #attendeeName,
    #chatRoom .chat-about {
        padding-top: 5px !important;
        font-size: 13px !important;
    }

    #chatRoom .message {
        max-width: 88% !important;
        font-size: 14px !important;
    }

    #chatRoom #chatMessage {
        /*
         * Prevent mobile browsers from zooming the page
         * when the message field receives focus.
         */
        font-size: 16px !important;
    }
}

/* Small-height landscape screens */

@media (max-height: 560px) {
    #chatRoom {
        top: 10px !important;
        bottom: 78px !important;

        height: auto !important;
        max-height: none !important;
    }
}