
/* EP identical blog / scripture comments layout */

.ep-comments-overlay .ep-comments-window,
.ep-blog-comments-overlay .ep-comments-window {
    display:flex !important;
    flex-direction:column !important;
    width:min(100%,1100px) !important;
    max-width:1100px !important;
    height:92dvh !important;
    max-height:92dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
}

.ep-comments-overlay .ep-comments-window-header,
.ep-blog-comments-overlay .ep-comments-window-header {
    flex:0 0 auto !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    border-bottom:1px solid var(--border) !important;
}

.ep-comments-overlay .ep-comments-window-body,
.ep-blog-comments-overlay .ep-comments-window-body {
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    padding:0 !important;
    background:var(--surface) !important;
}

/* Shared three-part layout */
.ep-comments-window-body .ep-final-section {
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    overflow:hidden !important;
}

.ep-comments-window-body .ep-final-scroll {
    display:block !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:20px clamp(16px,3vw,32px) !important;
    overscroll-behavior:contain;
}

.ep-final-scroll .ep-c2-list,
.ep-final-scroll .comment-list,
.ep-final-scroll .ep-discussion-comments {
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}

/* Composer is a sibling of scroll area, never inside it */
.ep-comments-window-body form.ep-final-composer {
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
    flex:0 0 auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:12px clamp(16px,3vw,32px) !important;
    box-sizing:border-box !important;
    border:0 !important;
    border-top:1px solid var(--border) !important;
    border-radius:0 !important;
    background:var(--surface) !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

.ep-final-composer .ep-final-input-row {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:flex-end !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

.ep-final-composer .ep-final-input-row textarea {
    display:block !important;
    flex:1 1 0% !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:46px !important;
    min-height:46px !important;
    max-height:140px !important;
    margin:0 !important;
    padding:11px 16px !important;
    box-sizing:border-box !important;
    resize:vertical;
    border:1px solid var(--border) !important;
    border-radius:23px !important;
    background:var(--surface2) !important;
    color:var(--text) !important;
    font:inherit;
}

.ep-final-composer .ep-final-send {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 46px !important;
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:var(--accent) !important;
    color:transparent !important;
    font-size:0 !important;
    cursor:pointer;
}

.ep-final-composer .ep-final-send::after {
    content:"";
    width:0;
    height:0;
    margin-left:4px;
    border-top:9px solid transparent;
    border-bottom:9px solid transparent;
    border-left:14px solid var(--accentText);
}

.ep-final-composer .ep-final-send:disabled {
    opacity:.5;
    cursor:not-allowed;
}

.ep-final-composer .ep-final-send:focus-visible {
    outline:3px solid var(--text);
    outline-offset:2px;
}

/* Existing emoji controls remain above the input */
.ep-final-composer .ep-c2-compose-actions {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    margin:0 0 8px !important;
    gap:8px !important;
}

.ep-final-composer .ep-c2-emoji-picker {
    bottom:calc(100% + 8px);
}

.ep-final-composer .ep-discussion-reply-notice,
.ep-final-composer .ep-blog-reply-notice,
.ep-final-composer .ep-c2-reply-notice {
    width:100%;
    box-sizing:border-box;
}

.ep-final-composer label {
    color:var(--text) !important;
}

@media(max-width:600px) {
    .ep-comments-overlay .ep-comments-window,
    .ep-blog-comments-overlay .ep-comments-window {
        width:100% !important;
        height:100dvh !important;
        max-height:100dvh !important;
        border-radius:0 !important;
    }

    .ep-comments-window-body .ep-final-scroll {
        padding:14px 16px !important;
    }

    .ep-comments-window-body form.ep-final-composer {
        padding:10px 12px max(10px,env(safe-area-inset-bottom)) !important;
    }

    .ep-final-composer .ep-final-send {
        flex-basis:42px !important;
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
    }
}
