/**
  Note: font sizes are not specified in this CSS file nor in NoteView CSS styles. They are specified by the function setFontSize() in miscUtils.js
 */
:root {
    --NoteView_padding: 24px;
    --NoteView_borderRadius: calc(var(--badgeBorderRadius) + var(--NoteView_padding));
    /*--NoteView_borderRadius: var(--badgeBorderRadius);*/
    --NoteView_minNoteTextHeight: 100px;
    --NoteView_margin: 10px;
    --NoteView_focusOutline: var(--focusOutline);
    --NoteView_tagInputSideButtonsWith: 100px;
}

.NoteView {
    position: relative; /* Needed for calculator anchor positioning */
    /* backdrop-filter creates a stacking context, so siblings painted later in
       the DOM will cover this note's absolutely-positioned children (e.g. the
       TypeaheadInput dropdown).  An explicit z-index: 0 registers every note in
       the same stacking layer; .NoteView_focused raises it to 1 so its dropdown
       clears all siblings below. */
    z-index: 0;
    margin-top: var(--NoteView_margin);
    margin-bottom: var(--NoteView_margin);
    border-radius: var(--NoteView_borderRadius);

    /* Apple liquid-glass look:
       - translucent frosted background lets the user wallpaper bleed through
       - backdrop-filter blurs that background so the card reads as glass
       - layered shadows (close+tight for definition, far+soft for floating depth)
       - inset top highlight suggests a glass edge catching light */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 6px 20px rgba(0, 0, 0, 0.06),
        0 16px 48px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);

    @media (prefers-color-scheme: dark) {
        background: rgba(53, 55, 59, 0.45);
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.4),
            0 6px 20px rgba(0, 0, 0, 0.5),
            0 16px 48px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

.NoteView_focused {
    outline: var(--NoteView_focusOutline) !important;
    border-radius: var(--NoteView_borderRadius);
    z-index: 1; /* lift above sibling NoteViews so dropdowns (TypeaheadInput_menu) aren't clipped by their stacking context */
}

.NoteView_noteText {
    font-family: "Calibri", -apple-system, BlinkMacSystemFont, sans serif;
    font-weight: 300;
    padding-top: var(--NoteView_padding);
    padding-right: var(--NoteView_padding);
    padding-left: var(--NoteView_padding);
    padding-bottom: calc(var(--NoteView_padding) / 2);
    word-wrap: break-word !important;
    outline: 0;
}

.NoteView_publicUnencryptedTitle {
    padding: var(--NoteView_padding) var(--NoteView_padding);
}

.NoteView_noteText[contenteditable=true] {
    min-height: var(--NoteView_minNoteTextHeight);
}

.NoteView_noteText img {
    display: block;
    max-width: 100%;
}

.NoteView_emptyNotePlaceholder {
    pointer-events: none;
    min-height: var(--NoteView_minNoteTextHeight);
    text-align: center;
    margin-top: calc(0px - var(--NoteView_minNoteTextHeight)); /* 0 with px won't work! */
    text-transform: uppercase;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
}

.NoteView_emptyNotePlaceholder * {
    font-family: 'Bootstrap-icons', sans-serif !important; /* We currently don't use icons in the empty note placeholder, but we use it to looks consistently with the search box */

    @media (prefers-color-scheme: light) {
        color: darkgray;
    }
    @media (prefers-color-scheme: dark) {
        color: gray;
    }

    @media (min-width: 700px) {
        font-size: 32px;
    }
    @media (max-width: 699px) {
        font-size: 20px;
    }
}

.NoteView_emptyNotePlaceholderText {
    flex: 1;
}

.NoteView_informationBar,
.NoteView_informationBar a,
._
{
    color: lightgray;
    min-height: var(--NoteViewToolbar_maskLeft);
    margin-bottom: calc(-1em * var(--bs-body-line-height) - var(--NoteViewToolbar_margin)); /* - var(--NoteViewToolbar_margin) is here to compensate to padding of NoteViewToolbar_container */
}

.NoteView_bottomArea {
    border-bottom-left-radius: var(--NoteView_borderRadius);
    border-bottom-right-radius: var(--NoteView_borderRadius);
    padding-top: 0;
    padding-right: var(--NoteView_padding);
    padding-left: var(--NoteView_padding);
    padding-bottom: 0;

    /*@media (prefers-color-scheme: light) {*/
    /*    background: #FFFFFF7F;*/
    /*}*/
    /*@media (prefers-color-scheme: dark) {*/
    /*    background: #35373B7F;*/
    /*}*/
}

.NoteView_tagInput {
    background: transparent;
    /*border: dashed 1px gray !important;*/
}

.NoteView .TypeaheadInput_input {
    background: var(--TagButton_backgroundColor) !important;
    border: none;
    border-radius: var(--badgeBorderRadius);
    padding: 2px 10px;
    height: var(--TagButton_height);
    font-size: 16px;
    width: 140px;
    transition: width 300ms, height 300ms;

    /* Apple liquid-glass: identical recipe to TagButton — the ADD TAGS input
       already shares the chip background, height, and border-radius, so giving
       it the same shadow + inset top highlight makes it read as the same
       material at the same hierarchy level. */
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.09),
        0 3px 10px rgba(0, 0, 0, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    @media (prefers-color-scheme: dark) {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.45),
            0 3px 10px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}

.NoteView .TypeaheadInput_input::placeholder {
    text-align: center;
}

.NoteView_tagInputMaximized .NoteView_tagInputWrapper {
}

.NoteView_tagInputMaximized .TypeaheadInput_input {
    font-size: 24px;
    width: calc(min(100vw, var(--UserLayout_contentWidth)) - 2 * var(--UserLayout_contentHorizontalMargin) - 2 * var(--NoteView_padding) - var(--NoteView_tagInputSideButtonsWith));
    height: calc(var(--TagButton_height) * 1.5);
    outline: none;
    @media (min-width: 1000px) {
        min-width: 500px;
    }
}

.NoteView_tagButtons {
    display: contents;
}

.NoteView_tagInputWrapper {
    display: inline-flex;
    align-items: center;
}

.NoteView_tagInputContainer {
    display: inline-block;
}

.NoteView_showTagSuggestionsBtn {
    /* Glass-chip "+" button — same circular icon-button recipe as
       .TagButton_removeButton so the two action buttons feel like the same
       material at the same hierarchy level. */
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    background: var(--TagButton_backgroundColor) !important;
    border: none;
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.09),
        0 3px 10px rgba(0, 0, 0, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    @media (prefers-color-scheme: dark) {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.45),
            0 3px 10px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}

.NoteView_hiddenNoteWall {
    padding: 30px;
    text-align: center;
    margin: auto;
}

.NoteView_thisNoteIsProtected {
    font-size: 24px;
    margin-bottom: 20px;
}

.NoteView_hiddenNoteWallSubmitFormButton {
    margin-bottom: 10px;
}

.NoteView_hiddenNoteWall input {
    max-width: 400px;
    margin: auto;
}

.NoteView_hideNoteBar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    background: rgba(255, 192, 203, 0.25);
    border-radius: 10px 10px 0 0;
}

.NoteView_hideNoteBar button {
    font-size: 18px;
}

.NoteView_hideNoteBar div {
    font-size: 24px;
    color: black;
}

.NoteView_tagArea {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 3px;
    align-items: center;
    margin: 8px 0;
}

.NoteView_titlePlaceholder {
    min-height: 2em;
    margin-top: 12px;
}

.NoteView_suggestedTagsLabel {
    margin-top: 10px;
}

.NoteView_suggestedTagsWrapper {
    display: block;
    transition: 1s ease-in-out !important;
    max-height: 0;
    overflow: hidden;
    white-space: unset;
    align-items: flex-start;
}

.NoteView_focused .NoteView_suggestedTagsWrapper {
    max-height: 92px;
}

.NoteView_suggestedTagsFadeOutContainer {
    width: 200px;
    margin-left: -200px;
    display: flex;
    flex-direction: row;
    pointer-events: none;
    align-self: stretch;
    text-align: right;
    /* for the fade effect of tag suggestions, see NoteView.updateColors() */
}

.NoteView_suggestedTagsList {
    display: inline-block;
    flex: 1;
    overflow: hidden !important;
}

.NoteView_suggestedTagsListNoWrap {
    white-space: nowrap;
}

.NoteView_suggestedTagsWrapperExpanded {
    max-height: 1000px !important;
    transition: 3s ease-in-out !important;
    white-space: unset;

    .NoteView_suggestedTagsList {
        white-space: unset;
    }
}

.NoteView_suggestedTagsWrapperExpanded .NoteView_suggestedTagsFadeOutContainer {
    background: none !important;
}

.NoteView_suggestedTagsWrapperToggle {
    /* Glass-chip styling — applies to both the expand/collapse chevron button and
       the "× hide tag suggestions" button.  Same recipe as the "+" show-suggestions
       button (.NoteView_showTagSuggestionsBtn) so all three action buttons feel
       like the same material. */
    text-align: center;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 1;
    pointer-events: all;
    border: none;
    align-self: flex-start;

    background: var(--TagButton_backgroundColor);
    border-radius: 50%;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.09),
        0 3px 10px rgba(0, 0, 0, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);

    @media (prefers-color-scheme: dark) {
        box-shadow:
            0 1px 2px rgba(0, 0, 0, 0.45),
            0 3px 10px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.09);
    }
}