:root {
    --primary: #14213d;
    --secondary: #243b67;
    --accent: #f4c95d;
    --panel: #ffffff;
    --page: #eef2f7;
    --text: #172033;
}

/* ==========================================================
   Global
========================================================== */

*:not(.fa):not(.fas):not(.far):not(.fal):not(.fat):not(.fad):not(.fab):not([class^="fa-"]):not([class*=" fa-"]) {
    font-family: Georgia, "Times New Roman", serif !important;
}

/* Preserve Font Awesome's own font families when the CSS build is used. */
.fa, .fas, .far, .fal, .fat, .fad, .fab,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
svg.svg-inline--fa {
    font-family: inherit !important;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page);
    color: var(--text);
}

/* ==========================================================
   Color Themes
========================================================== */

body[data-theme="emerald"] {
    --primary: #0d4f3c;
    --secondary: #16705a;
    --accent: #e3c567;
    --page: #edf7f3;
}

body[data-theme="burgundy"] {
    --primary: #5b1830;
    --secondary: #7b2946;
    --accent: #e6c36a;
    --page: #f8eff2;
}

body[data-theme="purple"] {
    --primary: #402060;
    --secondary: #603a7e;
    --accent: #f1cc65;
    --page: #f3eff8;
}

body[data-theme="charcoal"] {
    --primary: #20242b;
    --secondary: #343a42;
    --accent: #d7b65d;
    --page: #e8eaed;
}

/* ==========================================================
   Header
========================================================== */

.studio-header {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color: #fff;
}

.header-logo {
    display: block;
    width: min(620px, 62vw);
    height: 86px;
    object-fit: contain;
    object-position: left center;
}

.header-logo-link {
    text-decoration: none;
}

/* ==========================================================
   Social Icons
========================================================== */

.social-links a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .5);
    transition: .2s;
}

.social-links a:hover {
    background: var(--accent);
    color: var(--primary);
    transform: translateY(-2px);
}

/* ==========================================================
   Navigation
========================================================== */

.studio-navbar {
    background: var(--primary);
}

.studio-tagline {
    font-weight: 400 !important;
    font-size: 1rem;
}

/* ==========================================================
   Footer
========================================================== */

.studio-footer {
    background: var(--primary);
    color: #fff;
}

.studio-footer a {
    color: #fff;
    text-decoration: none;
}

.studio-footer a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ==========================================================
   Cards & Buttons
========================================================== */

.card {
    border: 0;
    border-radius: 16px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-warning {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--primary);
}

label,
.form-label {
    font-weight: 700;
}

/* ==========================================================
   Layout
========================================================== */

.studio-shell {
    min-height: 650px;
}

/* ==========================================================
   Sidebar
========================================================== */

.sidebar {
    background: var(--primary);
    color: #fff;
    border-radius: 16px 0 0 16px;
}

.sidebar-brand {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 18px;
    text-align: center;
}



.sidebar .nav-link {
    color: #fff;
    border-radius: 10px;
    margin-bottom: 6px;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: rgba(255, 255, 255, .16);
    color: var(--accent);
}

/* ==========================================================
   Collaboration Area
========================================================== */

.collaboration-panel {
    background: #fff;
    border-radius: 0 16px 16px 0;
}

.messages {
    height: 520px;
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px;
    background: linear-gradient(#f9fbfd, #f4f7fa);
    border: 1px solid #dce2e9;
    border-radius: 14px;
    scroll-behavior: smooth;
}

/* ==========================================================
   Messages
========================================================== */

.message {
    max-width: 78%;
    padding: 10px 13px;
    margin-bottom: 12px;
    border-radius: 14px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .06);
    overflow-wrap: anywhere;
}

.message.guest {
    background: #fff;
    border-left: 4px solid var(--secondary);
}

.message.moderator {
    margin-left: auto;
    background: var(--primary);
    color: #fff;
}

.message.system {
    max-width: 100%;
    text-align: center;
    background: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    font-style: italic;
}

.message.scripture {
    max-width: 90%;
    background: #fff8dc;
    border-left: 5px solid var(--accent);
}

.message-meta {
    font-size: .76rem;
    opacity: .75;
    margin-bottom: 4px;
}

/* ==========================================================
   Moderator
========================================================== */

.moderator-tools {
    border: 1px solid #e1e6ec;
    border-radius: 14px;
    background: #fafbfc;
}

.handle-list {
    max-height: 230px;
    overflow: auto;
}

.handle-pill {
    background: rgba(255, 255, 255, .12);
    padding: 7px 9px;
    border-radius: 9px;
    margin-bottom: 6px;
}

/* ==========================================================
   PDF Viewer
========================================================== */

.pdf-frame {
    width: 100%;
    height: 480px;
    border: 1px solid #d7dde5;
    border-radius: 12px;
}

/* ==========================================================
   Status Indicators
========================================================== */

.status-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
    background: #9aa0a6;
    box-shadow: none;
}

.status-dot.online {
    background: #2ecc71;
    box-shadow: 0 0 0 4px rgba(46, 204, 113, .18);
}

.live-badge {
    display: none;
}

.live-badge.is-live {
    display: inline-block;
}

/* ==========================================================
   Login
========================================================== */

.login-hero {
    background: linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color: #fff;
}

.small-help {
    font-size: .82rem;
    color: #6c757d;
}

/* ==========================================================
   Go To Top Button
========================================================== */

.go-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: none;
    z-index: 1050;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}

.go-top.show {
    display: block;
}

/* ==========================================================
   Miscellaneous
========================================================== */

.studio-context {
    max-width: 900px;
    line-height: 1.7;
}

.moderator-dashboard-title {
    border-bottom: 2px solid var(--accent);
    padding-bottom: 8px;
}

.header-logo,
.sidebar-brand img {
    max-height: 86px;
    width: auto;
    object-fit: contain;
}

.sidebar-brand img {
    max-width: 100%;
    margin-bottom: 1rem;
}

.collaboration-top {
    position: sticky;
    bottom: 12px;
    float: right;
    margin-top: 1rem;
    z-index: 5;
}

.leave-banner {
    transition: opacity .3s ease;
}

.question-row {
    font-size: .95rem;
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 991px) {

    .sidebar,
    .collaboration-panel {
        border-radius: 16px;
    }

    .messages {
        height: 420px;
        max-height: 58vh;
    }

    .message {
        max-width: 92%;
    }

    .header-logo {
        width: min(520px, 78vw);
        height: 74px;
    }

    .studio-tagline {
        white-space: normal;
        font-size: .9rem;
    }

}
.sidebar-brand > .fa-solid {
    display: inline-block;
    color: var(--accent);
    line-height: 1;
}


.header-brand-group{max-width:850px}.header-purpose{max-width:620px;font-size:.95rem;line-height:1.45;color:inherit}.leave-banner{position:relative;padding-right:3rem}.leave-banner-close{position:absolute;top:.45rem;right:.55rem;border:0;background:transparent;color:inherit;font-size:1.1rem;line-height:1;padding:.25rem;opacity:.8}.leave-banner-close:hover,.leave-banner-close:focus{opacity:1}.collaboration-top{width:2.5rem;height:2.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;padding:0}.form-label i,.nav-link i,.btn i,h1 i,h2 i,h3 i,h4 i,h5 i,h6 i{min-width:1.15em;text-align:center}@media(max-width:767.98px){.header-brand-group{align-items:flex-start!important}.header-purpose{font-size:.85rem}}


/* Header purpose and social columns */
.header-purpose {
    max-width: 900px;
    line-height: 1.55;
    color: rgba(255,255,255,.96);
}

/* Guest departure banner manual close control */
.leave-banner {
    position: relative;
    padding-right: 46px !important;
}
.leave-banner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(102,77,3,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    color: #664d03;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
}
.leave-banner-close:hover,
.leave-banner-close:focus {
    background: #fff;
    color: #000;
}

/* v7 persistent collaboration appearance and notices */
.collaboration-panel { background: var(--collaboration-background, #fff); }
.session-start-notice {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 5px rgba(227,197,103,.22), 0 8px 24px rgba(0,0,0,.18);
    animation: sessionPulse 1.2s ease-in-out 3;
    font-style: normal;
    font-weight: 700;
}
.leave-banner {
    background: #fff3cd !important;
    color: #664d03 !important;
    border: 2px solid #ffca2c !important;
    font-weight: 700;
    font-style: normal !important;
    animation: departurePulse .85s ease-in-out 2;
}
.leave-banner-close { float:right; border:0; background:transparent; color:inherit; font-size:1.15rem; }
@keyframes sessionPulse { 50% { transform: scale(1.01); filter: brightness(1.12); } }
@keyframes departurePulse { 50% { transform: translateX(3px); filter: brightness(1.08); } }
[data-bs-toggle="tooltip"] { cursor: help; }

/* v11 reaction controls */
.reaction-toolbar{padding:.5rem .65rem;border:1px solid rgba(0,0,0,.12);border-radius:.5rem;background:rgba(255,255,255,.7)}.reaction-button{min-width:2.35rem;font-size:1.05rem;line-height:1.2}

/* v14 dynamic third-column live media sidebar */
.live-media-sidebar{background:#fff;border-left:1px solid rgba(0,0,0,.12);position:relative;min-width:0}.live-sidebar-image{width:100%;max-height:360px;object-fit:cover;object-position:center top}.live-media-sidebar iframe{border:0}.live-media-sidebar a{word-break:break-word}@media(max-width:991.98px){.live-media-sidebar{border-left:0;border-top:1px solid rgba(0,0,0,.12)}}

/* Site-wide end-user content restrictions */
html,
body,
body *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]):not([contenteditable="true"] *) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

img,
svg,
video,
canvas {
    -webkit-user-drag: none;
    user-drag: none;
}

input,
textarea,
select,
option,
[contenteditable="true"],
[contenteditable="true"] * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}