:root {
    --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#postsContainer {
    display: flex;
    justify-content: center;
    /*background-color: #f8f8f8;*/
}

#topChatBox {
    position: sticky;
    z-index: 9;
    /*    top is calculated from the height of the topPanel which is 50px */
    top: 50px;
    padding-top: 30px;
    padding-bottom: 5px;
    background: linear-gradient(180deg, #f8f8f8 87%, transparent);
}

.topChatBoxWhenFeycherIsThere {
    /*    top is calculated from the height of the topPanel which is 50px + height of the canvas which is 30vh*/
    /*    so it becomes 50px + 30vh*/
    top: calc(50px + 30vh) !important;
    padding-top: 0px !important;
    margin-top: -5px !important;
}

#commentsContainer {
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
    /*flex-basis: 30ch; !* acts as min-width *!*/
    /*min-width: 35ch;*/
    /*max-width: min(95vw, 80ch);*/ /* sometimes setting char max width is not enough because some chars don't break and gets treated as one for e.g. https://revoldiv.com/posts/febe26f7-8d0a-434b-a14c-8b335bef9bb4/*/
    /*flex-grow: 1;*/
    font-family: var(--system-ui), serif;
    line-height: 1.9em;
    font-size: 0.95em;
    border-radius: 5px;
    /*background-color: #fafafa;*/
    /*background: linear-gradient(90deg, #fafafa, transparent);*/
    padding-bottom: 70px;
    align-items: center;
    /*background: linear-gradient(165deg, #f8f8f8, transparent);*/
    width: calc(100vw - 15px);
}


@media (min-width: 946px) {
    #commentsBody {
        /*position: sticky;*/
        /*top: 10px; !* don't delete this, helps avoid jumpy scrolling for the comments body, when the body is scrolled *!*/
        /*overflow-y: auto;*/
        overscroll-behavior: contain; /* don't delete this, see mdn, but it keeps the scrolling of the commentbox to not scroll the right side when scrolling is done for the comment section */
        /*height: calc(100vh - 300px); !* chosen so that the comments section don't jerk off, if you change test with npr-10-minutes and npr-1-minute and see if there are jerky motions when scrolling *!*/
        border-radius: 5px;
    }
}

#commentTreeRoot {
    /*padding: 15px px 0 0;*/
    overflow-wrap: break-word;
    max-width: 1000px;
    width: 100vw;
}

#commentTreeRoot .avatar {
    /*width: 30px; !* Set the desired width *!*/
    height: 30px; /* Set the desired height */
    overflow: hidden;
    /*border-radius: 50%;*/
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;*/
    margin: 0 5px;
}

#commentTreeRoot .avatar-image {
    /*width: 100%;*/
    height: 100%;
    object-fit: cover;
}

#commentsTreeContainer {
    /*position: sticky;*/
    /*top: calc(50px + 30vh + 150px);*/
    /*overflow-y: auto;*/
    /*position: relative;*/
}

/* top level comments only*/
#commentsTreeContainer > details {
    margin: 0 15px 22px 15px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 5%, rgb(248 248 248) 100%);
    padding: 16px 12px;
    transition: box-shadow 0.3s;
}

#commentsTreeContainer > details:hover {
    /*border-left: 1px solid #ededed; !* this is the border for the top level comments, need to set it to be the same as details because, it gets overridden by the details:hover *!*/
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 15px -10px, rgba(0, 0, 0, 0.05) 0px 0px 15px -2px;*/
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
}

/* top level and other comments */
details {
    position: relative;
    /*margin: 5px 0 5px 15px;*/
    margin: 5px 0 5px 15px;
    border-left: 1px solid #ededed;
    padding-left: 5px;
    border-radius: 10px;
    overflow: hidden;
    transition: border-left 0.3s, background-color 0.3s, margin 0.3s;
}

details:hover {
    border-left: 1px solid #b8b8b8;
    /*cursor: pointer;*/
    /*background-color: #f8f8f8;*/
}

/* when details is clicked */
.detailsActive {
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 5%, rgb(251 251 251) 100%)!important;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 0px 32px !important;
}

/*.commentStartAndEndTime {*/
/*  margin: 10px;*/
/*  font-weight: 300;*/
/*  font-size: 0.8em;*/
/*  color: #6d6d6d;*/
/*}*/

/*details > summary::marker, !* Latest Chrome, Edge, Firefox *!*/
/*details > summary::-webkit-details-marker !* Safari *!*/
/*{*/
/*    color: #b7b7b7;*/
/*}*/

details > summary::marker, /* Latest Chrome, Edge, Firefox */
details > summary::-webkit-details-marker /* Safari */
{
    display: none;
}

details > summary {
    /*background-color: #ededed;*/
    display: inline-flex;
    list-style: none;
    position: relative;
    /*cursor: pointer;*/
    /*align-items: center;*/
}

details > summary::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    left: 0;
    top: 0;
    bottom: 0;
    margin: 0px 0px 0 2px;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

details[open] > summary::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>');
}

details:not([open]) > summary::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6"><path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" /></svg>');
}

.commentTopPartContainer {
    display: inline-flex;
    flex-wrap: wrap;
    list-style: none;
    position: relative;
    /*cursor: pointer;*/
    align-items: center;
}


.innerCommentSection {
    /*border-left: 1px solid #ededed;*/
    /*background: #ededed;*/
    /*background: linear-gradient(165deg, #ededed, transparent)*/
}

.commentSectionMessage{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: calc(50% - 85px); /* 50% - half of the width of the message */
    background: #ebebeb;
    color: #646464;
    width: 170px;
    height: 17px;
    text-align: center;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    font-weight: 300;
    font-size: 0.8em;
}

.commentTextarea {
    font-family: var(--system-ui), serif;
    font-size: 0.9em;
    border-radius: 12px;
    border: 1px solid #f1f1f1;
    padding: 5px;
    background-color: #f1f1f1;
    /*width: calc(100% - 20px);*/
    outline: none !important;
    height: 26px;
    resize: vertical;
}


.commentUsername {
    /*color: #6d6d6d;*/
    color: #4b4b4b;
    font-size: 0.8em;
    font-weight: bold;
    /*padding-left: 2px;*/
}

.commentInfoDivider {
    color: #979797;
    margin: 0 10px;
    font-size: 0.3em;
}

.commentAnnotationTime {
    font-weight: 300;
    font-size: 0.8em;
    color: #6d6d6d;
    /*min-width: 50px;*/
    white-space: nowrap;

}

/*.commentCount {*/
/*    font-weight: 300;*/
/*    font-size: 0.8em;*/
/*    color: #6d6d6d;*/
/*    margin-right: 5px;*/
/*}*/

.comment {
    margin: 0 0 0 10px;
    font-weight: 300;
    /*font-size: 0.95em;*/
    font-size: 0.9em;
    line-height: 1.4em;
    padding: 5px 5px 10px 5px;
    user-select: text;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

@media (max-width: 600px) {
    .comment {
       font-weight: unset;
    }
}

.highlight-new-comment {
    animation: highlight-fade 3s ease-in-out;
}

@keyframes highlight-fade {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 255, 0, 0.3); }
}



.deletedComment {
    text-decoration: line-through;
}

.commentForm {
    margin: 5px 15px 20px 15px
}

.commentActionButtons {
    display: flex;
    color: #eaeaea;
    /*margin: 3px 3px 3px 15px;*/
}

.commentReplyContainer {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid #e8e8e8;
    /*padding: 2px 5px;*/
    padding: 2px 2px;
    background-color: #f1f1f1;
}

/*.commentReplyContainer:hover {*/
/*    border-color: #eadbff; !* A bright focus color *!*/
/*    box-shadow: inset 0 2px 5px rgba(98, 0, 234, 0.2), 0 0 5px rgba(98, 0, 234, 0.5);*/
/*    transition: border 0.3s ease-in-out, box-shadow 0.3s ease-in-out;*/
/*}*/

.commentActionItems {
    background-color: #e7e7e7 !important;
    /*border: 1px solid #e3e3e3!important;*/
    padding: 5px 10px;
}


.cancelComment {
    display: inline;
    padding: 5px 10px;
    border: 1px solid #eaeaea;
}


.commentActionItems:hover {
    background-color: #d9d9d9 !important;
    /*border: 1px solid #e3e3e3!important;*/
}

.commentActionItemsDivider {
    margin: 2px;
    color: #bababa;
}


/* all children and grandchildren buttons below */


.commentActionItemsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.commentActionButtons > button {
    font-weight: 300;
    font-size: 0.8em;
    color: #6d6d6d;
}

#commentsTitle {
    font-weight: 500;
    font-size: 1em;
    color: #343434;
    margin: 0 0 0 15px;
}


.lineIndicatorsMiddle {
    position: fixed;
    /*top: 10px;*/
    width: 2px;
    height: 1px;
    background-color: #ffefcb;
}

.lineIndicatorsLeftSide {
    position: fixed;
    width: 1px;
    height: 2px;
    background-color: #ffefcb;
}

.lineIndicatorsRightSide {
    position: fixed;
    width: 1px;
    height: 2px;
    background-color: #ffefcb;
}

.wordCommented {
    background-color: #ffefcb;
}

.sharedCommentHighlight {
    animation: pulse 2s ease-out infinite;
    border-radius: 2px;
}

.lastElementInteracted {
    animation: pulse 2s ease-out infinite;
    border-radius: 5px;
    animation-iteration-count: 3;
}

.timestampLink {
    font-weight: 500;
    font-size: 0.9em;
    color: #0087ff;
    cursor: pointer;
}

@media (hover: hover) {
    .timestampLink:hover {
        text-decoration: underline;
    }
}

.wordPositionHighlighter {
    background-color: transparent;
    animation: fadeinout 1.5s infinite;
    animation-iteration-count: 3;
    z-index: 2;
}


.saveComment {
    display: inline;
}

@keyframes fadeinout {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: #ffc000;
    }
}

.deleteComment {
    display: none;
}

.ai_toggle {
    position: relative;
    top: 30px;
    left: 6px;
}

.threadAiIcon {
    /*width: 30px;*/
    /*flex-shrink: 0;*/
    margin: 0 10px 0 5px;
    display: inline-flex;
}

.threadAiButton {
    opacity: 0;
    width: 0px;
    transition: opacity 0.5s, padding-left 0.5s, width 0.5s;
    display: inline-flex;
    justify-content: center;
    overflow: hidden;
    background-color: #ededed;
    padding: 3px;
    border-radius: 5px;
    margin: 2px 4px 2px 0px;
    /*border: 1px solid black;*/
}

.threadAiButton:empty {
    padding-left: 0;
}

.threadAiButton:hover {
    background-color: #f4f4f4;
    cursor: pointer;
}

.commentAi {
    /*border: 1px solid black !important;*/
    width: 70px;
    transition: width 0.5s;
    display: none;
}

.commentAi:hover {
    display: none;
    width: 340px;
}

.commentAi:hover .threadAiButton {
    opacity: 1;
    width: 100%;
    padding-left: 5px;
}

.commentCount {
    font-weight: bold;
    padding-left: 5px;
}

.commentCount:empty {
    padding-left: 0;
}


/*@keyframes bounce {*/
/*  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }*/
/*  40% { transform: translateY(-20px); }*/
/*  60% { transform: translateY(-10px); }*/
/*}*/