/*
 * Sugarwish Notecard WYSIWYG Editor styling.
 * Mirrors the React <PreviewPrintedNoteCard> in /var/www/SWAC.
 * No build step — included via <link rel="stylesheet"> on Blade pages
 * that use partials/notecard/notecard-editor.blade.php.
 */

.sw-notecard-editor {
    position: relative;
    display: block;
    /* Match SWAC PreviewPrintedNoteCard scaled dimensions exactly: the inner
     * card is rendered at 5.4in × 4.25in then transform: scale(0.75) (desktop)
     * / scale(0.6) (mobile). The wrapper width is the post-scale width so
     * layout uses the scaled (visible) dimensions. */
    width: 4.05in;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .sw-notecard-editor {
        width: 3.24in; /* 5.4in × 0.6 */
    }
}

/* The textarea is the form-value carrier. By DEFAULT (no JS / Tiptap init
 * failure / esm.sh blocked) it's visible as a normal textarea so the user
 * still has an editable field — same UX as the original cart/buyer pages
 * before the WYSIWYG editor was introduced. The JS module adds an
 * `is-initialized` class to the wrapper once Tiptap mounts; only then do
 * we hide the textarea and show the card preview. */
.sw-notecard-editor__textarea {
    display: block;
    width: 100%;
    min-height: 8rem;
    box-sizing: border-box;
    font-family: inherit;
}
/* Once Tiptap has mounted, hide the textarea via the standard a11y
 * visually-hidden pattern (not display:none — preserves screen readers + form
 * validation) and show the card preview in its place. */
.sw-notecard-editor.is-initialized .sw-notecard-editor__textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
/* Card frame is hidden until Tiptap mounts (otherwise users see an empty
 * 4.05in × 3.19in box with no way to edit). */
.sw-notecard-editor:not(.is-initialized) .sw-notecard-editor__card-frame,
.sw-notecard-editor:not(.is-initialized) .sw-notecard-editor__toolbar,
.sw-notecard-editor:not(.is-initialized) .sw-notecard-editor__color-palette {
    display: none;
}

/* --- Toolbar --- */
.sw-notecard-editor__toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
    padding: 4px 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sw-notecard-editor__toolbar[hidden] { display: none; }

.sw-notecard-editor__btn {
    background: transparent;
    border: 0;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
}
.sw-notecard-editor__btn:hover { background: #374151; }
.sw-notecard-editor__btn[aria-pressed="true"],
.sw-notecard-editor__btn--active { background: #374151; }

.sw-notecard-editor__btn--text {
    width: auto;
    padding: 0 8px;
    font-size: 12px;
}

.sw-notecard-editor__btn--color { position: relative; }
.sw-notecard-editor__color-indicator {
    position: absolute;
    bottom: 4px;
    left: 6px;
    right: 6px;
    height: 2px;
    border-radius: 1px;
    background: #ffffff;
}

.sw-notecard-editor__divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #374151;
    margin: 0 2px;
}

.sw-notecard-editor__counter {
    margin-left: 6px;
    padding: 0 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #d1d5db;
    font-variant-numeric: tabular-nums;
}
.sw-notecard-editor__counter--warn { color: #fcd34d; }
.sw-notecard-editor__counter--limit { color: #fca5a5; }

.sw-notecard-editor__color-palette {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #1f2937;
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    margin-bottom: 8px;
}
.sw-notecard-editor__color-palette[hidden] { display: none; }

.sw-notecard-editor__swatch {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid #374151;
    cursor: pointer;
    padding: 0;
}
.sw-notecard-editor__swatch:hover { border-color: #ffffff; }

/* --- Card visual frame ---
 * .__card-frame is sized at the SCALED dimensions (4.05in × 3.19in desktop /
 * 2.7in × 2.125in mobile) and clips overflow. Inside, .__card is the native
 * 5.4in × 4.25in surface scaled with `transform: scale(0.75)` so every glyph,
 * border, padding scales identically to the SWAC React component. */
.sw-notecard-editor__card-frame {
    width: 4.05in;
    height: 3.1875in; /* 4.25in × 0.75 */
    /* `clip` not `hidden` — same reason as `.__message` below. During a paste
     * that exceeds 4 lines, ProseMirror calls scrollIntoView on the caret
     * (which is at the end of the inserted content). `hidden` makes this a
     * scroll container, so the browser scrolls the card up to reveal the
     * caret — pushing the logo off the top. With `clip` no scroll happens
     * and the clampLines onUpdate handler then reduces the doc back to 4
     * paragraphs without any visual jolt. */
    overflow: clip;
    position: relative;
}
/* The card outline lives on this pseudo-element rather than on `.__card`
 * because `.__card` is scaled (transform: scale(0.75)) — a 1px border on
 * the scaled element renders at 0.75px and is unreliable at the right/
 * bottom edges (sub-pixel anti-aliasing + overflow-clip boundary). The
 * frame is unscaled, so a 1px border here is crisp on all four sides.
 * `box-sizing: border-box` + `inset: 0` keeps the border inside the
 * frame's clipped area. `border-radius` matches the scaled card radius
 * (card uses 8px × 0.75 ≈ 6px desktop, × 0.6 ≈ 5px mobile). */
.sw-notecard-editor__card-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid #737373;
    border-radius: 6px;
    pointer-events: none;
}
@media (max-width: 640px) {
    .sw-notecard-editor__card-frame {
        width: 3.24in; /* 5.4in × 0.6 */
        height: 2.55in; /* 4.25in × 0.6 */
    }
    .sw-notecard-editor__card-frame::after {
        border-radius: 5px;
    }
}

.sw-notecard-editor__card {
    width: 5.4in;
    height: 4.25in;
    background: #ffffff;
    border-radius: 8px;
    /* `clip` not `hidden` — see `.__card-frame` above. */
    overflow: clip;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    position: relative;
    transform: scale(0.75);
    transform-origin: top left;
}
@media (max-width: 640px) {
    .sw-notecard-editor__card {
        transform: scale(0.6);
    }
}

.sw-notecard-editor__card-inner {
    position: absolute;
    inset: 0;
    padding: 0.125in 0 0 0.125in;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sw-notecard-editor__logo {
    height: 0.9in;
    padding-top: 15px;
    margin-bottom: 0.125in;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.sw-notecard-editor__logo img {
    max-width: 3in;
    max-height: 0.9in;
    object-fit: contain;
}

.sw-notecard-editor__message {
    /* Fixed 2.8in tall — matches SWAC's `.note-section` exactly. Previously
       `flex: 1 1 auto`, which filled the card's leftover ~297px and let one
       more line break through than SWAC (5 paragraphs vs SWAC's 4), since the
       Enter-overflow guard measures against this box's clientHeight. The
       `0 0 auto` keeps it rigid inside the `.__card-inner` flex column. */
    flex: 0 0 auto;
    height: 2.8in;
    /* `clip`, not `hidden`: both clip overflow, but `hidden` makes this a
     * scroll container, so when the editor content transiently overflows
     * (many lines before the char-count font ramp shrinks them) the browser
     * scrolls this box to keep the caret in view — dragging the first line up
     * behind the logo, then "bouncing back" once the font readjusts. `clip`
     * is not scrollable, so the content stays top-anchored and the overflow
     * is clipped from the bottom instead. */
    overflow: clip;
    /* SWAC's `.note-section` uses display: inline-block so editor content
     * top-aligns inside the message area (cursor lands at top, not middle).
     * Using `display: block` + `text-align: center` here gives the same:
     * top-aligned vertically, centered horizontally. */
    display: block;
    text-align: center;
    padding: 0 16px;
    font-family: 'Montserrat', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    font-weight: 500;
    color: #1f2937;
    /* Initial size = SWAC's empty-message bucket. Inner card is wrapped in
     * `transform: scale(0.75)`, so this 28px renders visually at 21px —
     * matching SWAC. JS overrides on each keystroke per the font ramp. */
    font-size: 28px;
    line-height: 32px;
    transition: font-size 150ms ease, line-height 150ms ease;
}
.sw-notecard-editor__message .ProseMirror {
    width: 100%;
    outline: none;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    /* Lock font properties to whatever .sw-notecard-editor__message declares
     * (driven by the JS font ramp). `!important` defeats host-page bundles
     * that set `p, a { font-family/font-size/line-height }` globally — Lato's
     * metrics differ from Montserrat enough to trip the Tiptap overflow
     * guard at a different line count between the cart and step-3. */
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    color: inherit;
    text-align: inherit;
}
.sw-notecard-editor__message .ProseMirror p {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}
.sw-notecard-editor__message .ProseMirror p + p { margin-top: 1em !important; }

/* When the parent message section is overflow-blocked, flash an amber ring. */
.sw-notecard-editor__message--overflow {
    box-shadow: inset 0 0 0 2px #fbbf24;
    border-radius: 4px;
}

/* Mirror the color scheme of `.add-recipient-from-contact-list-btn`: a plain
   transparent link-style button — Sugarwish red text (#D2232A), a lighter-red
   hover (#e87373), no mouse-focus ring, and the standard #E77477 keyboard-
   focus glow. The buyerflow stylesheet otherwise lumps `.btn.btn-link` in with
   `.btn-danger` (red fill + border on hover/focus/active); the 4-class
   selectors below outrank that rule without needing !important. */
.btn.btn-link.sw-notecard-edit-trigger,
.btn.btn-link.sw-notecard-edit-trigger:hover,
.btn.btn-link.sw-notecard-edit-trigger:focus,
.btn.btn-link.sw-notecard-edit-trigger:active {
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
}
.btn.btn-link.sw-notecard-edit-trigger {
    color: #D2232A;
    /* Lock the text size. The prepick pages load purchase-flow.min.css, whose
       plain `.btn` rule (font-size: 1.25rem) leaks past Bootstrap's `.btn-sm`
       and enlarges this button. 14px / 1.5 matches `.btn-sm` — and the buyer
       step-3 rendering. The 3-class selector outranks the bare `.btn` rule. */
    font-size: 14px;
    line-height: 1.5;
}
.btn.btn-link.sw-notecard-edit-trigger:hover {
    color: #e87373;
}
.btn.btn-link.sw-notecard-edit-trigger:focus:not(:focus-visible) {
    box-shadow: none;
}
.btn.btn-link.sw-notecard-edit-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px #E77477;
}