#div_pfchat_notes{
    margin: 10px;
}

.tooltip:not(.picker_shown) {
    display: none;
}

@media screen and (max-width: 320px) {
    emoji-picker {
        --num-columns: 6;
        --category-emoji-size: 1.125rem;
    }

    #div_pfchat_notes {
        width: 100%;  /* On smaller screens, ensure it takes up full width */
        margin: 0;
    }
}

input[type=text] {
    width: 100%;          /* Full width to adapt to parent container */
    max-width: 100%;       /* Prevent from exceeding the container width */
    min-width: 300px;      /* Ensure a minimum width for usability */
    /*height: auto;          !* Let the height adjust naturally *!*/
    /*min-height: 100px;     !* Minimum height to ensure it doesn't collapse *!*/
    padding: 5px;         /* Provide spacing inside the textarea */
    font-size: 1rem;       /* Make text size responsive */
    box-sizing: border-box;/* Ensure padding and borders are included in width/height */
    resize: vertical;      /* Allow resizing vertically but not horizontally */
    border: 1px solid #ccc;/* Basic styling */
    border-radius: 5px;    /* Rounded corners for better aesthetics */
}

@media (max-width: 768px) {
    input[type=text] {
        width: 100%;  /* On smaller screens, ensure it takes up full width */
    }
}

.note_bubble {
    /* triangle dimension */
    --b: 1em; /* base */
    --h: 0.5em; /* height */

    --p: 25%; /* position */
    --r: 1.2em; /* the radius */

    border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
    background: 0 0/100% calc(100% + var(--h))
    linear-gradient(60deg, #59a9da, rgba(144, 168, 194, 0.7)); /* the gradient */
    position: relative;
    z-index: 1;
}
.note_bubble:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 calc(-1*var(--h));
    background-image: inherit;
    clip-path:
            polygon(50% 50%,
            min(100%,var(--p) + var(--b)/2)
            calc(100% - var(--h)),var(--p) 100%,
            max(0%,var(--p) - var(--b)/2) calc(100% - var(--h)));
}

.note_bubble {
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    font-family: Arial, Helvetica, sans-serif;
    padding: 8px;
    max-width: 15ch;
    line-height: normal;
    text-align: center;
}

.note_bubble_name{
    font-size: 8px;
    font-weight: 300;
    font-family: sans-serif;
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content at the start (base) horizontally */
    align-items: center; /* Center content vertically */
    height: 100%;
}

.profile-pic {
    position: relative;
    /*display: inline-block;*/
}

.is-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;  /* Adjust size as needed */
    height: 15px;
    background-color: #4CAF50;  /* Green color */
    border-radius: 50%;
    border: 2px solid white;  /* White border around the green circle */
}

.a-note{
    padding: 10px 5px;
}

.note-zoom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.note-zoom #note-zoom-content{
}

.note-zoom #note-zoom-shared-ago{
    font-style: italic;
    font-size: 11px;
    color: lightgrey;
    align-self: center;
}