/*
 * Copyright (c) 2026 Tharzen Inc.
 * All Rights Reserved.
 *
 * This software is proprietary and confidential.
 * Unauthorized copying, modification, distribution,
 * or reverse engineering is prohibited except as
 * permitted under the applicable license agreement.
 *
 * See LICENSE.md.
 */
/* ClickEdit AI — editor UI. Two rows: message on top, buttons below (right-aligned + stable). */
#ckai-bar{position:fixed;right:16px;bottom:16px;z-index:2147483647;display:flex;flex-direction:column;gap:8px;
  background:#1f2733;color:#fff;font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:10px 12px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
body.ckai-editing #ckai-bar{width:min(92vw,340px)}            /* fixed width while editing -> no jitter */
body:not(.ckai-editing) #ckai-status{display:none}            /* compact (just the button) when off */
/* just after a publish reload: show the "Published N edits" confirmation above the "Edit again" button */
#ckai-bar.ckai-published{width:min(92vw,340px)}
#ckai-bar.ckai-published #ckai-status{display:block}
#ckai-status{min-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.95}
#ckai-status .ok{color:#5fe08a}#ckai-status .warn{color:#ffcf5c}#ckai-status .err{color:#ff8a8a}#ckai-status .muted{opacity:.7}
/* Buttons ALWAYS stack vertically (full width), so the bar reads consistently and scales to any number of
   actions instead of some rows splitting horizontally and others stacking. */
#ckai-bar .ckai-row{display:flex;flex-direction:column;gap:8px}
#ckai-bar button{font:inherit;border:0;border-radius:7px;padding:8px 12px;cursor:pointer;color:#fff;text-align:center;width:100%;flex:0 0 auto}
#ckai-bar button.ckai-primary{background:rgba(0,124,186,.95)}
#ckai-bar button.ckai-primary:hover{background:rgba(0,124,186,1)}
#ckai-bar button.ckai-secondary{background:#3a4658}
#ckai-bar button.ckai-secondary:hover{background:#46546a}
#ckai-bar button[disabled]{opacity:.5;cursor:default}

/* edit-mode cues */
body.ckai-editing::after{content:"";position:fixed;inset:0;border:3px solid rgba(0,124,186,.9);pointer-events:none;z-index:2147483646}
body.ckai-editing :is(h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,b,i,blockquote,figcaption,td,th,label,dd,dt):hover{outline:1px dashed rgba(0,124,186,.8);outline-offset:2px;cursor:text}
body.ckai-editing #ckai-bar :hover{outline:none;cursor:default}
/* runtime-generated content (data-ckai-generated): show it's NOT editable (grey dashed + help cursor); style its bar notice */
body.ckai-editing [data-ckai-generated]:hover{outline:1px dashed rgba(120,132,148,.8)!important;outline-offset:2px;cursor:help!important}
.ckai-gen-note{color:#bfe0ff}
/* CLIC-388 per-element lifecycle: grey (editing) -> amber (checking) -> green (ready) | red (failed).
   One data-ckai-state drives the color; only "editing" is contenteditable. !important so a theme's own
   background can't hide the state. */
[data-ckai-state="editing"]{outline:2px solid rgba(130,140,155,.95)!important;outline-offset:2px;border-radius:2px;background:rgba(130,140,155,.14)!important}
[data-ckai-state="checking"]{outline:2px solid rgba(240,180,40,.98)!important;outline-offset:2px;border-radius:2px;background:rgba(240,180,40,.16)!important;cursor:default}
[data-ckai-state="ready"]{outline:2px solid rgba(45,185,95,.98)!important;outline-offset:2px;border-radius:2px;background:rgba(45,185,95,.15)!important;cursor:default}
[data-ckai-state="failed"]{outline:2px solid rgba(230,75,75,.98)!important;outline-offset:2px;border-radius:2px;background:rgba(230,75,75,.13)!important;cursor:default}
/* "choosing": one edited token maps to a start AND an end field (shared date/time, or a point event) — the box
   waits on the user to pick a rendered outcome from its menu. Blue: a question, not an error. */
[data-ckai-state="choosing"]{outline:2px solid rgba(0,124,186,.98)!important;outline-offset:2px;border-radius:2px;background:rgba(0,124,186,.12)!important;cursor:default}
[data-ckai-saved]{background:rgba(95,224,138,.32)}            /* published */
.ckai-undone{animation:ckaiUndo 1.2s ease-out}
@keyframes ckaiUndo{0%{background:rgba(255,90,90,.35)}100%{background:transparent}}

/* Per-box inline menu: a compact popup near the box (desktop) or fixed by the bar (mobile). No modal. Buttons
   sit in a HORIZONTAL row; Copy / Undo / Cancel are UTF-8 icon buttons to save space. */
.ckai-box-menu{position:absolute;z-index:2147483645;background:#1f2733;color:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.32);
  padding:6px;font:12px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;gap:5px;max-width:280px}
.ckai-box-menu .ckai-bm-reason{color:#ffb4b4;padding:1px 3px;white-space:normal}
.ckai-box-menu .ckai-bm-row{display:flex;gap:5px;justify-content:flex-end}
.ckai-box-menu button{font:inherit;border:0;border-radius:6px;padding:5px 10px;cursor:pointer;color:#fff;background:#3a4658}
.ckai-box-menu button:hover{filter:brightness(1.12)}
.ckai-box-menu button.ckai-bm-check{background:rgba(240,180,40,.98);color:#1f2733;font-weight:600}
.ckai-box-menu button.ckai-bm-ic{padding:5px 9px;font-size:15px;line-height:1;min-width:34px}   /* icon button */
/* Mobile: the menu is FIXED near the bar (JS positions it just above / below), distinct from it, not full width. */
.ckai-box-menu.ckai-mfix{position:fixed;max-width:min(88vw,300px);box-shadow:0 6px 24px rgba(0,0,0,.45)}
/* Disambiguation picker: each choice is the REAL rendered outcome (bold) with a small intent label below it.
   Full-width, left-aligned, stacked; the preview wraps so long ranges stay readable. Pick by result, not field. */
.ckai-box-menu .ckai-bm-choice{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:#2b3547;padding:8px 10px}
.ckai-box-menu .ckai-bm-choice:hover{background:#38445a}
.ckai-box-menu .ckai-bm-choice .ckai-ch-prev{font-weight:600;white-space:normal;line-height:1.3}
.ckai-box-menu .ckai-bm-choice .ckai-ch-lbl{font-size:11px;opacity:.72}

/* Bottom-bar control colored by the aggregate precedence (red > grey > amber > green). The "Check" (editing)
   state uses the SAME amber as the inline Check button, so the two read as one action. */
#ckai-bar button.ckai-st-failed{background:rgba(230,75,75,.95)}
#ckai-bar button.ckai-st-editing{background:rgba(240,180,40,.98);color:#1f2733}
#ckai-bar button.ckai-st-checking{background:rgba(240,180,40,.6);color:#1f2733}
#ckai-bar button.ckai-st-ready{background:rgba(45,185,95,.98)}
/* Drag the bar to the top so it never covers the bottom of the page (right side kept). */
body.ckai-top #ckai-bar{bottom:auto;top:16px}
#ckai-bar{cursor:grab}#ckai-bar:active{cursor:grabbing}#ckai-bar button{cursor:pointer}

/* Recovery dialog — shown when an edit can't be published, so the user never loses what they typed. */
.ckai-recover-ov { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 2147483646; display: flex; align-items: center; justify-content: center; }
.ckai-recover { background: #fff; color: #0f172a; width: min(520px, 92vw); max-height: 86vh; overflow: auto; border-radius: 12px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35); font: 14px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; }
.ckai-recover .ckai-rc-h { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.ckai-recover .ckai-rc-reason { color: #b45309; margin-bottom: 14px; }
.ckai-recover .ckai-rc-l { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.ckai-recover .ckai-rc-before { background: #f1f5f9; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; }
.ckai-recover .ckai-rc-after { width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.ckai-recover .ckai-rc-row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.ckai-recover .ckai-rc-row button { padding: 8px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; font: inherit; }
.ckai-recover .ckai-rc-row .ckai-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
#ckai-status .ckai-recover-link { color: #2563eb; text-decoration: underline; cursor: pointer; margin-left: 6px; }

/* Mobile edit sheet — a full-screen editor that sits ABOVE the on-screen keyboard (height is set to the
   visualViewport so it fits the visible area). The 16px textarea font stops iOS from zooming on focus. */
.ckai-sheet-ov { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; z-index: 2147483646;
  background: rgba(15,23,42,.55); display: flex; flex-direction: column; }
.ckai-sheet { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 8px; background: #fff;
  color: #0f172a; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); overflow: hidden; }
.ckai-sheet-head { padding: 12px 14px; font: 600 15px/1.2 -apple-system, Segoe UI, Roboto, sans-serif;
  border-bottom: 1px solid #e5e7eb; }
.ckai-sheet-ta { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; border: 0; outline: none;
  resize: none; padding: 14px; font: 16px/1.5 -apple-system, Segoe UI, Roboto, sans-serif; color: #0f172a; }
.ckai-sheet-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e5e7eb; }
.ckai-sheet-row button { flex: 1; border: 0; border-radius: 8px; padding: 13px; cursor: pointer;
  font: 600 15px/1 -apple-system, Segoe UI, Roboto, sans-serif; color: #fff; }
.ckai-sheet-row .ckai-primary { background: rgba(0,124,186,.95); }
.ckai-sheet-row .ckai-secondary { background: #3a4658; }

/* Refresh veil: shown the instant a publish/undo triggers a page reload, so the stale page reads as "updating"
   during the reload fetch (a few seconds sometimes). Removed automatically when the fresh page replaces it. */
#ckai-veil { position: fixed; inset: 0; z-index: 2147483647; cursor: progress;
  background: rgba(30,37,46,.5); -webkit-backdrop-filter: grayscale(1) saturate(.35);
  backdrop-filter: grayscale(1) saturate(.35); display: flex; align-items: center; justify-content: center;
  animation: ckai-veil-in .12s ease-out; }
@keyframes ckai-veil-in { from { opacity: 0; } to { opacity: 1; } }
#ckai-veil .ckai-veil-msg { background: rgba(11,74,110,.96); color: #fff; padding: 12px 18px; border-radius: 8px;
  box-shadow: 0 4px 22px rgba(0,0,0,.32); font: 600 14px/1.3 -apple-system, Segoe UI, Roboto, sans-serif; }