/* Barokamera inline visual editor — v2 styles (extends v1 with bubble + dialog) */
:root {
    --bki-blue: #1d4ed8;
    --bki-green: #059669;
    --bki-amber: #d97706;
    --bki-red: #dc2626;
}

/* === V1: toolbar (top-right) === */
#bki-bar {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 2147483600;
    display: flex; gap: 6px;
    background: #1f2933; color: #fff;
    border-radius: 10px; padding: 8px 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    flex-wrap: wrap;
    max-width: calc(100vw - 28px);
}
#bki-bar button, #bki-bar a {
    background: #374151; color: #fff; border: 0;
    padding: 6px 11px; border-radius: 6px;
    cursor: pointer; font-size: 13px; font-weight: 600;
    text-decoration: none; line-height: 1.2;
}
#bki-bar button:hover, #bki-bar a:hover { background: #4b5563; }
#bki-bar button.bki-on { background: var(--bki-green); }
#bki-bar .bki-status { padding: 6px 8px; color: #cbd5e1; font-size: 12px; }
#bki-bar .bki-status.bki-saving { color: var(--bki-amber); }
#bki-bar .bki-status.bki-saved  { color: var(--bki-green); }
#bki-bar .bki-status.bki-error  { color: var(--bki-red); }

/* Editable region styling when edit mode ON */
body.bki-edit-mode [data-bk-id] {
    outline: 1px dashed rgba(29, 78, 216, 0.35);
    outline-offset: 1px;
    transition: outline-color 0.15s, background 0.15s;
    cursor: text;
    position: relative;
}
body.bki-edit-mode [data-bk-id]:hover {
    outline: 2px solid var(--bki-blue);
    outline-offset: 2px;
}
body.bki-edit-mode [data-bk-id][data-bk-id^="img-"] { cursor: pointer; }
body.bki-edit-mode [data-bk-id][data-bk-id^="sec-"] {
    outline: 1px dashed rgba(217, 119, 6, 0.45);
    outline-offset: 4px;
}
body.bki-edit-mode [data-bk-id][contenteditable="true"]:focus {
    outline: 2px solid var(--bki-blue);
    background: #eff6ff;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.15);
}
body.bki-edit-mode [data-bk-id]:hover::before {
    content: attr(data-bk-id);
    position: absolute; top: -22px; left: 0;
    background: var(--bki-blue); color: #fff;
    font-size: 10px; padding: 2px 7px; border-radius: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700; pointer-events: none; z-index: 100;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.bki-img-overlay {
    position: absolute; inset: 0;
    background: rgba(29, 78, 216, 0.75);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; cursor: pointer;
    opacity: 0; transition: opacity 0.15s; z-index: 50;
}
body.bki-edit-mode [data-bk-id^="img-"] { position: relative; }
body.bki-edit-mode [data-bk-id^="img-"]:hover .bki-img-overlay { opacity: 1; }

.bki-sec-toggle {
    position: absolute; top: 4px; right: 4px;
    background: var(--bki-amber); color: #fff;
    border: 0; padding: 4px 10px; border-radius: 4px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    z-index: 60; box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    opacity: 0; transition: opacity 0.15s;
}
body.bki-edit-mode [data-bk-id^="sec-"] { position: relative; }
body.bki-edit-mode [data-bk-id^="sec-"]:hover .bki-sec-toggle { opacity: 1; }
.bki-sec-toggle.bki-hidden { background: var(--bki-red); }

.bki-pages-menu {
    position: fixed; top: 60px; right: 14px;
    background: #1f2933; border-radius: 10px;
    padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.3);
    z-index: 2147483599; display: none; min-width: 220px;
    max-height: 70vh; overflow-y: auto;
}
.bki-pages-menu.bki-open { display: block; }
.bki-pages-menu a {
    display: block; color: #cbd5e1;
    padding: 8px 12px; text-decoration: none;
    border-radius: 4px; font-size: 13px;
}
.bki-pages-menu a:hover { background: #374151; color: #fff; }
.bki-pages-menu a.bki-current { color: #fff; background: var(--bki-blue); }

.bki-flash {
    position: fixed; top: 60px; right: 14px;
    background: var(--bki-green); color: #fff;
    padding: 10px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    z-index: 2147483700; pointer-events: none;
    opacity: 0; transition: opacity 0.2s, transform 0.2s;
    transform: translateY(-10px); box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    font-family: -apple-system, sans-serif;
}
.bki-flash.bki-show { opacity: 1; transform: translateY(0); }
.bki-flash.bki-err { background: var(--bki-red); }

/* === V2: rich-text bubble === */
#bki-bubble {
    position: absolute;
    z-index: 2147483601;
    display: none;
    background: #1f2933;
    border-radius: 8px;
    padding: 4px;
    gap: 2px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#bki-bubble button {
    background: transparent; color: #fff;
    border: 0; padding: 6px 9px;
    cursor: pointer; font-size: 13px;
    border-radius: 4px; min-width: 30px;
    line-height: 1;
}
#bki-bubble button:hover { background: #374151; }
#bki-bubble button b { font-weight: 800; }
#bki-bubble button i { font-style: italic; }

/* === V2: New page dialog === */
.bki-dialog {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 2147483700;
    display: flex; align-items: center; justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.bki-dialog-inner {
    background: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    width: 100%; max-width: 460px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.bki-dialog h3 { margin: 0 0 18px; font-size: 20px; color: #1f2933; }
.bki-dialog label { display: block; margin: 14px 0; font-size: 13px; color: #4b5563; font-weight: 600; }
.bki-dialog input[type=text], .bki-dialog select {
    display: block; width: 100%; margin-top: 6px;
    padding: 10px 12px; border: 1px solid #d1d5db;
    border-radius: 6px; font-size: 14px; color: #1f2933; background: #fff;
    box-sizing: border-box;
}
.bki-dialog label.bki-checkbox { display: flex; align-items: center; gap: 8px; }
.bki-dialog label.bki-checkbox input { width: auto; margin: 0; }
.bki-dialog-actions { display: flex; gap: 8px; margin-top: 22px; justify-content: flex-end; }
.bki-dialog-actions button {
    padding: 9px 18px; border: 0; border-radius: 6px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    background: #f3f4f6; color: #1f2933;
}
.bki-dialog-actions button:hover { background: #e5e7eb; }
.bki-dialog-actions button.bki-btn-primary { background: var(--bki-blue); color: #fff; }
.bki-dialog-actions button.bki-btn-primary:hover { background: #1e40af; }

/* === V2: menu drag-drop === */
.apl-drawer-nav.bki-menu-edit a {
    cursor: grab !important;
    background: rgba(29, 78, 216, 0.08);
    border-left: 3px solid var(--bki-blue);
    margin-left: -3px;
}
.apl-drawer-nav.bki-menu-edit a:hover {
    background: rgba(29, 78, 216, 0.18);
}
.apl-drawer-nav.bki-menu-edit a::before {
    content: '⋮⋮  ';
    color: rgba(29, 78, 216, 0.7);
    font-weight: 700;
}
#bki-menu-save {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 2147483800;
    background: var(--bki-green); color: #fff;
    border: 0; padding: 14px 24px;
    border-radius: 10px; font-size: 14px; font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(5, 150, 105, 0.45);
}
#bki-menu-save:hover { background: #047857; }

@media print { #bki-bar, #bki-bubble, .bki-pages-menu, .bki-flash, .bki-dialog, #bki-menu-save { display: none !important; } }