.comment-author{
    font-weight: 700;
    /* color: teal; */
}

.comment-author-icon{
    /* color: teal; */
    margin-right: 4px; 
}

.comment-date{
    font-size: 12px;
    color: var(--pn-text-muted);
}

.comment-compact-date{
    font-size: 13px;
    color: var(--pn-text-muted);
}

.comment-compact-restricted{
    color: var(--pn-text-muted);
    font-size: 13px;
}

.comment-title{
    font-weight: 700;
    font-size: 22px;
}

.comment-title-discussion_hub{
    font-weight: 700;
    font-size: 25px;
}

.comment-body-bold{
    font-weight: 700;
}

.comment-compact-replies-icon{
    font-size: 12.5px;
}

.badge-compact{
    vertical-align: text-bottom;
    padding: 2.5px 4px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 11px;
    margin-bottom: 1px;
}

.badge-super-compact{
    vertical-align: text-bottom;
    padding: 2.5px 4px;
    border-radius: 3px;
    font-weight: 500;
    font-size: 9px;
}

.comment-compact-body{
    color: var(--pn-text-muted-strong);
}


.comment-compact-unread-indicator{
    top: 3px; 
    left: 3px; 
    background-color: teal; 
    border-top-left-radius: 40%;
    border-bottom-right-radius: 20%;
    transform: translate(-50%,-50%);
    position: absolute;
    padding: 0.25rem;
}

.comment-compact-title{
    font-weight: 600;
    font-size: 17px;
}

.comment-compact-title-navbar{
    font-weight: 600;
    font-size: 16.5px;
}

.comment-quote{
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-left: 4px solid var(--pn-border);
    color: var(--pn-text-muted);
}

.comment-body ul{
    padding-left: 1.3rem !important;
}

.comment-body ol{
    padding-left: 1.3rem !important;
}

.replies-border{
    border-left: 2px solid var(--pn-border-subtle);
}

.replies-label{
    font-weight: 700;
    font-size: 15px;
    color: var(--pn-text-muted);
}

.discussion-header-btn{
    background-color: var(--pn-btn-subtle-bg);
    color: var(--pn-text-muted-strong);
    padding: 2px 6px;
}

.comment-footer-container{
    font-size: 13px;
}

.discussion-header{
    font-size: 13px;
}

.comment-attachment-file-name{
    font-weight: 500;
    font-size: 13px;
}

.comment-compact-chapter-title{
    font-weight: 400;
    font-size: 14px;
}

#offcanvas-channels{
    width: 260px; 
    margin-top: 50px;
}

#offcanvas-channels-header{
    display: inline; 
    height: 46px; 
}

@media (min-width: 1200px) {
    #discussion-hub-discussion-list-and-discussion-container{
        margin-left: 256px;
    }
}

@media (min-width: 901px) {
    #discussion-hub-discussion-list-header{
        width: 420px; 
        padding-top: 4px; 
        padding-left: 1.25rem; 
    }
}

@media (max-width: 900px) {
    #discussion-hub-discussion-list-header{
        padding-top: 4px; 
        padding-left: 1.25rem;
        padding-right: 0px; 
    }
}


@media (max-width: 900px) {
    #discussion-hub-discussion-list{
        font-size: 14px;  
        padding-bottom: 300px;
    }
}

@media (min-width: 901px) {
    #discussion-hub-discussion-list{
        font-size: 14px; 
        width: 420px; 
        padding-bottom: 300px;
    }
}

#discussion-hub-discussion{
    padding-bottom: 300px; 
    font-size: 14px;
}

@media (max-width: 900px) {
    .d-none-dh-small{
        display: none;
    }
}

@media (min-width: 901px) {
    .d-none-dh-large{
        display: none;
    }
}

.block-ref-name-title{
    font-size: 17px;
    font-family: Times;
}

/* Naming the block a post belongs to -- above the discussion list, and on a note's
   compact card. It identifies the post rather than heading it, so it stays in the
   surrounding text colour instead of the accent colour atom.css gives atom names.
   The weight is restated because atom.css is not loaded on the discussion hub, and
   the label has to look the same wherever it appears. */
.block-ref-name-title .atom-name,
.block-ref-name-title .atom-title{
    color: inherit;
}

.block-ref-name-title .atom-name{
    font-weight: bold;
}

/* In the offcanvas header the label shares a row with the header buttons, so it is
   sized and centred against them rather than using the compact card's size. It
   scrolls the chapter to its block when clicked; the cursor is the only affordance,
   since the label reads as the header of what is below it rather than as a link. */
#discussions-block-name-title .block-ref-name-title{
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
}

/* Math in a block label runs inline with the title text, so it is sized to match,
   the way `.atom .katex` does in the chapter. Otherwise it picks up KaTeX's own
   1.21em -- 1.17em inside the offcanvas -- and reads as oversized next to it. */
.block-ref-name-title .katex{
    font-size: 1em !important;
}

.comment-body blockquote{
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 4px solid var(--pn-border);
}

.comment-body p{
    white-space: pre-wrap;
}

.comment-body h1{
    font-size: 1.6rem;
}

.comment-body h2{
    font-size: 1.4rem;
}

.comment-body h3{
    font-size: 1.2rem;
}

.comment-body h4{
    font-size: 1.1rem;
}

.comment-body h5{
    font-size: 1rem;
}

.comment-body pre{
    background-color: var(--pn-surface-page);
    padding: 10px;
    border-radius: 4px;
}

.comment-body pre code{
    padding: 0px;
    border-radius: 0px;
}

.comment-body code{
    background-color: var(--pn-surface-page);
    padding: 2px 5px;
    border-radius: 4px;
    color: inherit;
}

.comment-attachments-container img{
    max-width: 100%;
}

.comment-body img{
    max-width: 100%;
}

.comment-body>:last-child{
    margin-bottom: 5px;
}

.channel-follow-btn{
    background-color: var(--pn-btn-subtle-bg);
    color: var(--pn-text-muted-strong);
    padding: 4px 8px;
    font-size: 14px;
}

.unread-count-badge{
    background-color: teal;
    color: white;
    padding-left: 4.5px;
    padding-right: 4.5px;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    vertical-align: text-bottom;
}

#new-comment-dot{
    top: 12px; 
    /* right: 7px; */
}

#new-notification-dot{
    top: 12px; 
    /* right: 7px; */
}

.btn-discussions-filter{
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 30px;
    border-color: var(--pn-text-muted);
    color: var(--pn-text-muted);
}

.btn-discussions-filter-narrow{
    padding-left: 6.5px;
    padding-right: 6.5px;
}

.btn-discussions-filter:hover{
    border-color: var(--pn-text-muted);
    background-color: var(--bs-body-bg);
    color: var(--pn-text-muted);
}

.btn-discussions-filter:hover.active{
    border-color: #007bff;
    background-color: #007bff;
    color: white;
}

.modal-header-discussion-hub{
    padding-left: 30px;
    padding-right: 30px;
}

.score-input{
    border: 0px;
    border-bottom: 1px solid var(--pn-border);
    border-radius: 0px;
    padding-left: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
}

/* Animated dots */

.animated-dots span {
    opacity: 0;
}

@keyframes typing {
    0%, 100% { opacity: 0; }
    10% { opacity: 1; } /* First dot appears */
    20% { opacity: 1; } /* Second dot appears */
    30%, 70% { opacity: 1; } /* Third dot appears, all dots stay visible */
    80%, 90% { opacity: 0; } /* All dots start fading out together */
}

.animated-dots span:nth-child(1) {
    animation: typing 2s infinite;
}

.animated-dots span:nth-child(2) {
    animation: typing 2s infinite 0.2s;
}

.animated-dots span:nth-child(3) {
    animation: typing 2s infinite 0.4s;
}

/* ************* */

.comment-compact-title.htmx-swapping{
    opacity: 0;
}

.comment-compact-title{
    opacity: 1;
    transition: opacity 1s ease-out;
}

.comment-title.htmx-swapping{
    opacity: 0;
}

.comment-title{
    opacity: 1;
    transition: opacity 1s ease-out;
}
/* ************* */

#quote-reply-btn{
    position: fixed;
    z-index: 2000; /* Above the discussion offcanvas (Bootstrap: 1045). */
    font-size: 13px;
    padding: 2px 8px;
}


/* Notes: plain click-to-edit editor */

/* Mirrors the .form-control box model (padding, border, radius, line-height) so
   the text sits in exactly the same place in both modes and does not shift when
   the editor opens and closes. The border is transparent: it only reserves space. */
.note-body{
    cursor: text;
    min-height: 120px;
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    line-height: 1.5;
    background-color: rgba(0, 0, 0, 0.03);
}

.note-placeholder{
    color: #999;
}

.note-editor{
    font-size: inherit;
    min-height: 120px;
}