/*
|======================================================*
|        Picture-in-Picture (PiP) note module
|======================================================*
| Every style the PiP feature owns lives here - nothing else should carry
| PiP rules. The file is loaded in the main document (for the tab-side
| placeholder) and pip-note.js re-appends it LAST inside the PiP window,
| so the "body.pip-window ..." block below wins over the site stylesheets
| it copies in.
|
| Two groups:
|   1. Main-document styles  - what the tab looks like while the note is
|      popped out (placeholder, hidden editor, trigger button).
|   2. PiP-window styles     - the shell inside the PiP window itself,
|      scoped to body.pip-window so they are inert in the tab.
*/


/*
|------------------------------------------------------
| 1. Main document (the tab)
|------------------------------------------------------
*/

/* While the note is open in the PiP window, the main editor shows a
   placeholder instead of the (hidden) plain textarea / empty mount. */
body.pip-active #editorTextarea>#textarea__editor {
    display: none;
}

body.pip-active .hmw-button {
    display: none !important;
}

/* The formatting switch rebuilds the editor, which the popped-out note
   cannot follow - hide it for as long as the note is out of the tab. */
body.pip-active .toggle__formating,
body.pip-locked .toggle__formating {
    display: none !important;
}

.pip-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.pip-placeholder img {
    opacity: 0.6;
    margin-bottom: 8px;
}

.pip-placeholder__heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-dark-yellow);
}

.pip-placeholder__desc {
    font-size: 14px;
    color: var(--placeholder-color);
}

.pip-placeholder #pipRestoreBtn {
    margin-top: 14px;
    padding: 9px 22px;
    border: none;
    border-radius: 6px;
    background: var(--color-dark-yellow);
    color: var(--color-paper);
    font-size: 14px;
    cursor: pointer;
}

.pip-placeholder #pipRestoreBtn:hover {
    opacity: 0.85;
}

/* Waiting for the tab that owns the PiP window to answer. */
.pip-placeholder #pipRestoreBtn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Document Picture-in-Picture is a desktop-only API, and the narrow
   layouts have no room for the trigger - hide it below the breakpoint.
   Beats the inline display pip-note.js sets when the API is supported. */
@media screen and (max-width: 1024px) {
    #pipNoteBtn {
        display: none !important;
    }
}

/* Trigger button active state (note currently popped out). */
.side__pannel #pipNoteBtn.active img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(84%) saturate(1468%) hue-rotate(90deg) brightness(94%) contrast(89%);
}

body[data-theme="dark"] .pip-placeholder__heading {
    color: #fff;
}

body[data-theme="dark"] .pip-placeholder #pipRestoreBtn {
    background: var(--light-font-color);
    color: #fff;
}

/* pip-locked = the note on screen is popped out in ANOTHER tab. Same
   placeholder as pip-active, but the editor still exists underneath (this
   tab never handed it to a PiP window), so the formatted editor and its
   toolbar have to be hidden too. */
body.pip-locked #editorTextarea>#textarea__editor,
body.pip-locked #editorTextarea>.ProseMirror,
body.pip-locked #editorTextarea>.custom__menubar {
    display: none !important;
}

body.pip-locked .hmw-button {
    display: none !important;
}

/* Title is edited in the PiP window's header while the note is out. */
body.pip-active .ql-title,
body.pip-locked .ql-title {
    opacity: 0.6;
    cursor: not-allowed;
}

body.pip-locked #pipNoteBtn {
    opacity: 0.5;
    pointer-events: none;
}


/*
|------------------------------------------------------
| 2. PiP window shell
|------------------------------------------------------
| Layout is: .pip-header / .pip-toolbar / #editorTextarea / .pip-footer
| in a full-height flex column. Only #editorTextarea scrolls, so the
| title, toolbar and counters stay pinned and nothing ever shows a second
| scrollbar. The :has() guard keeps the html rule out of the tab.
*/

html:has(> body.pip-window) {
    height: 100%;
    overflow: hidden;
}

body.pip-window {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background: var(--color-paper);
}

/* Nothing but the shell may render here - anything the page injects into
   <body> (ad slots, overlays) would float over the note and swallow
   clicks. */
body.pip-window>*:not(.pip-header):not(.pip-toolbar):not(#editorTextarea):not(.pip-footer) {
    display: none !important;
}

body.pip-window::before,
body.pip-window::after {
    content: none !important;
    display: none !important;
}

/* 16px gutter everywhere: title, toolbar, note body and counters all line
   up on the same left edge. */
body.pip-window .pip-header {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-paper-light);
    background: var(--color-paper);
    flex: 0 0 auto;
}

body.pip-window .pip-header .ql-title {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 0;
    color: var(--color-dark);
}

/* Toolbar row: sits between the title and the note, outside the scrolling
   area - that is what keeps it pinned. overflow stays visible so the
   headings dropdown can hang below it. */
body.pip-window .pip-toolbar {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
    overflow: visible;
    background: var(--color-light);
    border-bottom: 1px solid var(--color-paper-light);
}

body.pip-window .custom__menubar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 16px !important;
    padding-left: 0 !important;
    gap: 12px;
    flex-wrap: wrap;
    overflow: visible !important;
}

/* The "Headings" face is the first item, so its own left border just draws
   a stray line against the window edge. */
body.pip-window .heading__face {
    border-left: 0 !important;
    padding-left: 16px !important;
}

/* Headings dropdown.
   home.css hangs the six items off the page with hardcoded pixel offsets
   (60/110/165...) that assume the tab's layout. Inside the PiP window they
   are re-anchored to the toolbar as one gapless panel, stacked with
   translateY in multiples of each item's OWN height - no pixel guesswork,
   so the rows cannot drift apart or overlap. */
body.pip-window .custom__menubar .heading {
    position: absolute;
    top: 100%;
    left: 0 !important;
    width: 130px;
    max-width: 118px !important;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 18px;
    line-height: 18px;
    background-color: var(--color-light);
    border: 1px solid var(--color-paper-light);
    border-top: 0;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
    z-index: 1001;
}

body.pip-window .custom__menubar .heading:hover {
    background-color: var(--color-paper-light);
}

/* The level the cursor is already in: setBlockType reports the command as
   unavailable, so runDisableObserver dims it to 0.3 - which made the whole
   row see-through and let the note text behind it bleed in. Keep it opaque
   and read it as "current selection" instead. */
body.pip-window .custom__menubar .heading.less-opacity {
    opacity: 1 !important;
    background-color: var(--color-paper);
    font-weight: 700;
}

body.pip-window .custom__menubar>.heading:nth-child(5) {
    transform: translateY(0);
}

body.pip-window .custom__menubar>.heading:nth-child(6) {
    transform: translateY(100%);
}

body.pip-window .custom__menubar>.heading:nth-child(7) {
    transform: translateY(200%);
}

body.pip-window .custom__menubar>.heading:nth-child(8) {
    transform: translateY(300%);
}

body.pip-window .custom__menubar>.heading:nth-child(9) {
    transform: translateY(400%);
}

body.pip-window .custom__menubar>.heading:nth-child(10) {
    transform: translateY(500%);
}

/* The note is the only scrolling box in the window. */
body.pip-window #editorTextarea {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    position: relative;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.pip-window .ProseMirror {
    min-height: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 16px !important;
    overflow: visible !important;
    outline: none;
}

/* Plain mode: the textarea fills the mount exactly, so an empty note shows
   no scrollbar at all. */
body.pip-window #textarea__editor {
    display: block;
    position: absolute;
    inset: 0;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box;

    /* Don't create a second scrollbar */
    overflow: visible !important;

    resize: none;
    border: none;
    outline: none;
}

body.pip-window .pip-footer {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 16px;
    border-top: 1px solid var(--color-paper-light);
    background: var(--color-paper);
    color: var(--placeholder-color);
    font-size: 12px;
    flex: 0 0 auto;
}

body.pip-window .pip-footer span {
    color: var(--color-dark-yellow);
    font-weight: 600;
    margin-right: 3px;
}


/*
|------------------------------------------------------
| 3. Home side-panel tooltips - flipped below the button
|------------------------------------------------------
| style.css hangs every [data-tooltip] above its element. The side panel
| sits at the very top of the editor, so those tooltips point up into the
| toolbar. Mirror them below the button instead - position only, the
| colours, sizing and timing stay exactly as style.css defines them.
|
| This sheet loads after style.css, and the extra .side__pannel in the
| selector outranks the bare [data-tooltip], so no !important is needed.
|
| Desktop only: below 1000px the panel becomes a fixed bar pinned to the
| bottom of the viewport, where a tooltip underneath would fall off screen.
*/

@media only screen and (min-width: 1001px) {

    /* Bubble: top edge 8px under the button. */
    .side__pannel [data-tooltip]::before,
    .side__pannel [data-tooltip].initial::before {
        top: calc(100% + 8px);
        bottom: auto;
    }

    /* Arrow: same 1px overlap as the original, and the triangle flips from
       pointing down (border-top) to pointing up (border-bottom). The hidden
       state also slides in from below now instead of from above. */
    .side__pannel [data-tooltip]::after,
    .side__pannel [data-tooltip].initial::after {
        top: calc(100% - 1px);
        bottom: auto;
        border-top-color: transparent;
        border-bottom-color: var(--color-dark);
        transform: translateX(-50%) translateY(200%) scale(0);
    }

    /* Re-state the shown state: style.css's [data-tooltip]:hover::after ties
       on specificity with the rule above, and this sheet loads later - without
       this the arrow would stay stuck at scale(0). */
    .side__pannel [data-tooltip]:hover::after,
    .side__pannel [data-tooltip].initial::after {
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (max-width: 1000px) {
    .side__pannel [data-tooltip]::before,
    .side__pannel [data-tooltip].initial::before {
        display: none;
    }
}