/*
 * Prenship Meet true glass panels
 *
 * Only the outer panel provides glass opacity.
 * Inner layers remain transparent so meeting video stays visible.
 */

/* ==========================================================
   CHAT
========================================================== */

#chatRoom {
    background: rgba(15, 23, 42, 0.30) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;

    backdrop-filter: blur(10px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%) !important;

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/*
 * Remove the stacked white layers that made the
 * original glass style appear almost fully opaque.
 */
#chatRoom .chat-app,
#chatRoom #chatContent,
#chatRoom .chat,
#chatRoom #chatHistory,
#chatRoom .chat-history {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Header and input remain lightly tinted. */
#chatRoom .chat-header,
#chatRoom .chat-message {
    background: rgba(15, 23, 42, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* Header text and controls. */
#chatRoom #attendeeName,
#chatRoom .chat-about,
#chatRoom .chat-header a,
#chatRoom .message-data,
#chatRoom .message-data-time {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.70) !important;
}

/* Keep messages readable over any camera background. */
#chatRoom .message {
    color: #172033 !important;
    text-shadow: none !important;

    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12) !important;
}

#chatRoom .my-message {
    background: rgba(238, 242, 255, 0.82) !important;
}

#chatRoom .other-message {
    background: rgba(220, 252, 231, 0.82) !important;
}

/* Message field remains readable. */
#chatRoom #chatMessage {
    color: #172033 !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.50) !important;
}

#chatRoom .input-group-text {
    color: #172033 !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.50) !important;
}

/* Participant chooser inside chat. */
#chatRoom #plist {
    background: rgba(15, 23, 42, 0.84) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    border-color: rgba(255, 255, 255, 0.18) !important;
}

#chatRoom #plist,
#chatRoom #plist .name,
#chatRoom #plist .status,
#chatRoom #plist a,
#chatRoom #plist button {
    color: #f8fafc !important;
}

#chatRoom #plist li:hover,
#chatRoom #plist li.active {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================
   SETTINGS, REACTIONS AND OTHER MODALS
========================================================== */

.modal {
    background: rgba(0, 0, 0, 0.08) !important;

    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

.modal-content {
    color: #ffffff !important;
    background: rgba(15, 23, 42, 0.38) !important;

    border: 1px solid rgba(255, 255, 255, 0.24) !important;

    backdrop-filter: blur(12px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(125%) !important;

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.modal-header,
.modal-body,
.modal-footer {
    background: transparent !important;
}

.modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
}

.modal-footer {
    border-top-color: rgba(255, 255, 255, 0.16) !important;
}

.modal-title,
.modal-content label,
.modal-content p,
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6,
.modal-content td,
.modal-content th {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.68) !important;
}

/* Inputs need a solid-enough surface for usability. */
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content .form-control,
.modal-content .form-select {
    color: #172033 !important;
    background: rgba(255, 255, 255, 0.88) !important;

    border-color: rgba(255, 255, 255, 0.48) !important;
    text-shadow: none !important;
}

/* ==========================================================
   WHITEBOARD
========================================================== */

/*
 * Whiteboard remains lighter than other tools because drawings
 * and controls require a reliable light working surface.
 */
#whiteboard {
    background: rgba(255, 255, 255, 0.64) !important;

    border: 1px solid rgba(255, 255, 255, 0.34) !important;

    backdrop-filter: blur(9px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(9px) saturate(120%) !important;
}

#whiteboardHeader {
    background: rgba(255, 255, 255, 0.48) !important;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 680px) {
    #chatRoom {
        background: rgba(15, 23, 42, 0.38) !important;
    }

    /*
     * Inner mobile layers must remain transparent.
     * The previous 82% white rule made mobile almost solid.
     */
    #chatRoom .chat-app,
    #chatRoom #chatContent,
    #chatRoom .chat,
    #chatRoom #chatHistory,
    #chatRoom .chat-history {
        background: transparent !important;
    }

    .modal-content {
        background: rgba(15, 23, 42, 0.46) !important;
    }

    #whiteboard {
        background: rgba(255, 255, 255, 0.72) !important;
    }
}