/* ═══════════════════════════════════════════════
   LF PostBox — Reusable Rich Text Editor
   File: assets/css/lf-postbox.css
   ═══════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────── */
.lf-postbox {
    --pb-bg:         #0b1117;
    --pb-border:     #1e2d2d;
    --pb-border-act: #00ffd5;
    --pb-toolbar-bg: #0f1a1a;
    --pb-toolbar-border: #162020;
    --pb-btn-bg:     #162424;
    --pb-btn-hover:  #1e3232;
    --pb-btn-active: #00ffd5;
    --pb-btn-text:   #a8c0bc;
    --pb-btn-act-text: #001a17;
    --pb-content-bg: #0b1117;
    --pb-content-fg: #d4e8e4;
    --pb-link:       #00ffd5;
    --pb-placeholder:#2a3e3c;
    --pb-radius:     10px;
    --pb-min-h:      180px;
    --pb-max-h:      380px;
    --pb-font:       'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    --pb-body-font:  system-ui, -apple-system, sans-serif;
    --pb-sep:        rgba(0,255,213,.08);

    position: relative;
    border: 1.5px solid var(--pb-border);
    border-radius: var(--pb-radius);
    background: var(--pb-bg);
    transition: border-color .2s ease;
    overflow: hidden;
}

.lf-postbox:focus-within {
    border-color: var(--pb-border-act);
    box-shadow: 0 0 0 2px rgba(0,255,213,.07);
}

/* ── Toolbar ──────────────────────────────────── */
.lf-pb-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 8px 10px;
    background: var(--pb-toolbar-bg);
    border-bottom: 1px solid var(--pb-toolbar-border);
    position: sticky;
    top: 0;
    z-index: 5;
}

.lf-pb-sep {
    width: 1px;
    height: 20px;
    background: var(--pb-sep);
    margin: 0 3px;
    flex-shrink: 0;
}

/* ── Toolbar Buttons ─────────────────────────── */
.lf-pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    background: var(--pb-btn-bg);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--pb-btn-text);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--pb-body-font);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

.lf-pb-btn:hover {
    background: var(--pb-btn-hover);
    color: #d4f5ef;
    border-color: rgba(0,255,213,.15);
}

.lf-pb-btn.active,
.lf-pb-btn:active {
    background: var(--pb-btn-active);
    color: var(--pb-btn-act-text);
    border-color: var(--pb-btn-active);
    transform: scale(.95);
}

.lf-pb-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: currentColor;
}

/* special icon-only buttons */
.lf-pb-btn.icon-only {
    min-width: 28px;
    padding: 0;
}

/* ── Image upload trigger ─────────────────────── */
.lf-pb-file-input {
    position: absolute;
    width: 0; height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Editor Content Area ─────────────────────── */
.lf-pb-content {
    min-height: var(--pb-min-h);
    max-height: var(--pb-max-h);
    overflow-y: auto;
    padding: 14px 16px;
    background: var(--pb-content-bg);
    color: var(--pb-content-fg);
    font-family: var(--pb-body-font);
    font-size: 14px;
    line-height: 1.75;
    outline: none;
    word-break: break-word;
    resize: vertical;           /* user can drag bottom-right to expand */
    /* scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #1e3232 transparent;
}

.lf-pb-content::-webkit-scrollbar { width: 5px; }
.lf-pb-content::-webkit-scrollbar-track { background: transparent; }
.lf-pb-content::-webkit-scrollbar-thumb { background: #1e3232; border-radius: 3px; }

/* placeholder */
.lf-pb-content:empty::before {
    content: attr(data-placeholder);
    color: var(--pb-placeholder);
    pointer-events: none;
}

/* ── Content typography inside editor ─────────── */
.lf-pb-content a {
    color: var(--pb-link);
    text-decoration: underline;
    text-decoration-color: rgba(0,255,213,.35);
}
.lf-pb-content a:hover { text-decoration-color: var(--pb-link); }

.lf-pb-content h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    margin: .8em 0 .3em;
    border-bottom: 1px solid var(--pb-sep);
    padding-bottom: .25em;
}
.lf-pb-content h3 {
    font-size: 1.05em;
    font-weight: 600;
    color: #e0f5f1;
    margin: .7em 0 .25em;
}
.lf-pb-content ul, .lf-pb-content ol {
    padding-left: 1.4em;
    margin: .4em 0;
}
.lf-pb-content li { margin: .2em 0; }
.lf-pb-content blockquote {
    border-left: 3px solid var(--pb-border-act);
    margin: .5em 0;
    padding: .4em 1em;
    color: #7db8b0;
    background: rgba(0,255,213,.03);
    border-radius: 0 6px 6px 0;
}
.lf-pb-content p { margin: .35em 0; }

.lf-pb-content code {
    background: #111e1c;
    color: #00ffd5;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--pb-font);
    font-size: .88em;
}

/* ── Images inside editor ─────────────────────── */
.lf-pb-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 6px 0;
    display: block;
    cursor: default;
    border: 1.5px solid var(--pb-border);
    transition: border-color .2s;
}
.lf-pb-content img:hover { border-color: var(--pb-border-act); }
.lf-pb-content img.selected { border-color: var(--pb-border-act); outline: 2px solid rgba(0,255,213,.3); }

/* ── Footer bar (char count / status) ───────────  */
.lf-pb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: var(--pb-toolbar-bg);
    border-top: 1px solid var(--pb-toolbar-border);
    font-size: 11px;
    color: #3a5552;
    user-select: none;
    gap: 8px;
    flex-wrap: wrap;
}

.lf-pb-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lf-pb-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #1a3330;
    transition: background .3s;
}
.lf-pb-status-dot.dirty { background: #f59e0b; }
.lf-pb-status-dot.saved { background: #00ffd5; }

/* ── Link modal ───────────────────────────────── */
.lf-pb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(3px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.lf-pb-modal-overlay.open {
    opacity: 1;
    pointer-events: all;
}

.lf-pb-modal {
    background: #0d1a1a;
    border: 1.5px solid #1e3230;
    border-radius: 12px;
    padding: 24px 28px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.8);
    transform: translateY(8px);
    transition: transform .2s;
}
.lf-pb-modal-overlay.open .lf-pb-modal {
    transform: translateY(0);
}

.lf-pb-modal h4 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: #00ffd5;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.lf-pb-modal input {
    width: 100%;
    box-sizing: border-box;
    background: #0b1117;
    border: 1.5px solid #1e2d2d;
    border-radius: 8px;
    color: #d4e8e4;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    margin-bottom: 10px;
    transition: border-color .2s;
    font-family: system-ui, sans-serif;
}
.lf-pb-modal input:focus { border-color: #00ffd5; }

.lf-pb-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.lf-pb-modal-btn {
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    font-family: system-ui, sans-serif;
}
.lf-pb-modal-btn:active { transform: scale(.96); }
.lf-pb-modal-btn.confirm { background: #00ffd5; color: #001a17; }
.lf-pb-modal-btn.confirm:hover { opacity: .88; }
.lf-pb-modal-btn.cancel { background: #162424; color: #7db8b0; border: 1px solid #1e3230; }
.lf-pb-modal-btn.cancel:hover { background: #1e3030; }
.lf-pb-modal-btn.danger { background: #3a1212; color: #ff6b6b; border: 1px solid #4a1c1c; }
.lf-pb-modal-btn.danger:hover { background: #4a1a1a; }

/* ── Upload progress toast ────────────────────── */
.lf-pb-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #0d1a1a;
    border: 1.5px solid #1e3230;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 13px;
    color: #a8c0bc;
    box-shadow: 0 8px 30px rgba(0,0,0,.7);
    z-index: 9100;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    max-width: 320px;
}
.lf-pb-toast.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.lf-pb-toast.error { border-color: #4a1c1c; color: #ff8080; }
.lf-pb-toast.success { border-color: #00ffd5; color: #00ffd5; }

.lf-pb-toast-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(0,255,213,.2);
    border-top-color: #00ffd5;
    border-radius: 50%;
    animation: lf-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes lf-spin { to { transform: rotate(360deg); } }

/* ── Resize handle hint ───────────────────────── */
.lf-pb-resize-hint {
    text-align: right;
    font-size: 10px;
    color: #1a3330;
    padding: 0 10px 2px;
    background: var(--pb-toolbar-bg);
    cursor: ns-resize;
    letter-spacing: .04em;
    user-select: none;
    line-height: 1.8;
}

/* ── Image upload modal ───────────────────────── */
.lf-pb-img-overlay {
    z-index: 9200; /* above link modal */
}

.lf-pb-img-modal {
    max-width: 480px !important;
}

/* Drop zone */
.lf-pb-img-drop-zone {
    position: relative;
    border: 2px dashed #1e3230;
    border-radius: 10px;
    background: #0b1117;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    overflow: hidden;
}
.lf-pb-img-drop-zone:hover,
.lf-pb-img-drop-zone.lf-pb-drag-over {
    border-color: #00ffd5;
    background: rgba(0,255,213,.04);
}
.lf-pb-img-drop-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    pointer-events: none;
}
.lf-pb-img-drop-inner svg {
    color: #2a4a46;
}
.lf-pb-img-drop-inner span {
    font-size: 13px;
    color: #7db8b0;
    font-weight: 500;
}
.lf-pb-img-drop-inner em {
    font-size: 11px;
    color: #3a5552;
    font-style: normal;
}

/* Dim inputs inside image modal */
.lf-pb-dim-input {
    width: 100%;
    box-sizing: border-box;
    background: #0b1117;
    border: 1.5px solid #1e2d2d;
    border-radius: 8px;
    color: #d4e8e4;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    transition: border-color .2s;
    font-family: system-ui, sans-serif;
}
.lf-pb-dim-input:focus { border-color: #00ffd5; }