/* ----------------------------------------------------------------------------
 * Kairo Attachment Review modal — Kunst restyle
 * Drop into web/assets/ and load AFTER kairo-attachment-review-modal.js
 * (which injects its own <style id="kairo-attachment-review-style">).
 *
 * This file only restyles. The modal's JS, behaviour and storage layer stay
 * identical — only colors, typography, spacing, radii and a few state cues
 * are overridden.
 * -------------------------------------------------------------------------- */

:root {
  --karm-red:        #ec193c;
  --karm-red-strong: #cf1232;
  --karm-red-soft:   color-mix(in oklch, #ec193c 16%, transparent);
  --karm-ink:        oklch(0.94 0.012 70);
  --karm-ink-2:      oklch(0.78 0.012 60);
  --karm-ink-3:      oklch(0.62 0.012 60);
  --karm-shell:      oklch(0.19 0.018 50);
  --karm-panel:      oklch(0.16 0.018 50);
  --karm-card:       oklch(0.22 0.018 50);
  --karm-stage:      oklch(0.10 0.018 50);
  --karm-border:     oklch(1 0 0 / 0.08);
  --karm-border-s:   oklch(1 0 0 / 0.16);
  --karm-ochre:      oklch(0.78 0.11 85);
  --karm-font:       "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --karm-mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ---- Backdrop + shell --------------------------------------------------- */
.kairo-review-backdrop {
  background: oklch(0.06 0.018 50 / 0.78) !important;
  color: var(--karm-ink) !important;
  font-family: var(--karm-font) !important;
  padding: 20px !important;
  backdrop-filter: blur(2px);
}

.kairo-review-shell {
  background: var(--karm-shell) !important;
  border: 1px solid var(--karm-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 90px rgba(0,0,0,0.46) !important;
}

/* ---- Header ------------------------------------------------------------- */
.kairo-review-header {
  height: 52px !important;
  background: var(--karm-panel) !important;
  border-bottom: 1px solid var(--karm-border) !important;
  padding: 0 12px 0 16px !important;
}

.kairo-review-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--karm-ink) !important;
  font-family: var(--karm-font) !important;
  letter-spacing: -0.005em;
  position: relative;
  padding-left: 14px;
}
/* Red anchor dot before the title (no markup change needed) */
.kairo-review-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  background: var(--karm-red);
  border-radius: 2px;
}

/* ---- Toolbar buttons ---------------------------------------------------- */
.kairo-review-actions { gap: 4px !important; }

.kairo-review-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: transparent !important;
  border: 1px solid var(--karm-border) !important;
  color: var(--karm-ink) !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
}

.kairo-review-btn:hover {
  background: oklch(1 0 0 / 0.05) !important;
  border-color: var(--karm-border-s) !important;
}

.kairo-review-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 1.75 !important;
}

/* Active state — Kunst red instead of cold blue */
.kairo-review-btn[data-active="true"] {
  background: var(--karm-red-soft) !important;
  border-color: var(--karm-red) !important;
  color: var(--karm-red) !important;
}

/* ---- Body, stage, sidebar ----------------------------------------------- */
.kairo-review-body {
  grid-template-columns: minmax(0, 1fr) 320px !important;
  height: 100% !important;
  min-height: 0 !important;
}

.kairo-review-stage {
  background: var(--karm-stage) !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* FIT mode: the stage-content needs a *definite* height so the image's
   max-height: 100% can resolve. min-height alone doesn't anchor percentages
   in flex/grid contexts. PAN mode keeps the original max-content growth. */
.kairo-review-stage-content {
  width: 100% !important;
  height: 100% !important;
}
.kairo-review-stage[data-view="pan"] .kairo-review-stage-content {
  width: auto !important;
  height: auto !important;
  min-width: max-content !important;
  min-height: max-content !important;
}

/* Iframe (PDFs, fallback): force full-stage size so it doesn't collapse to
   the 150px default iframe height. */
.kairo-review-frame {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #fff !important;
}

/* FIT mode: image fills the stage box and is letterboxed via object-fit.
   PAN mode: image takes its natural pixel size and the stage scrolls. */
.kairo-review-image,
.kairo-review-video {
  background: var(--karm-stage) !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
.kairo-review-stage[data-view="pan"] .kairo-review-image,
.kairo-review-stage[data-view="pan"] .kairo-review-video {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: initial !important;
}

.kairo-review-sidebar {
  background: var(--karm-panel) !important;
  border-left: 1px solid var(--karm-border) !important;
}

.kairo-review-side-head {
  padding: 14px !important;
  border-bottom: 1px solid var(--karm-border) !important;
}
.kairo-review-side-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--karm-ink) !important;
}
.kairo-review-side-note {
  font-size: 11px !important;
  color: var(--karm-ink-3) !important;
  margin-top: 4px !important;
  line-height: 1.45 !important;
}

/* ---- Markers ------------------------------------------------------------ */
.kairo-review-marker {
  width: 26px !important;
  height: 26px !important;
  background: var(--karm-red) !important;
  border: 2px solid #fff !important;
  font-family: var(--karm-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.kairo-review-marker:hover {
  transform: translate(-50%, -50%) scale(1.06) !important;
  box-shadow: 0 0 0 4px color-mix(in oklch, #ec193c 35%, transparent),
              0 10px 22px rgba(0,0,0,0.45) !important;
}

/* ---- Comment cards ------------------------------------------------------ */
.kairo-review-list {
  padding: 12px !important;
  gap: 8px !important;
}

.kairo-review-comment {
  background: var(--karm-card) !important;
  border: 1px solid var(--karm-border) !important;
  border-radius: 9px !important;
  padding: 12px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}
.kairo-review-comment:hover {
  border-color: color-mix(in oklch, #ec193c 30%, var(--karm-border)) !important;
}
.kairo-review-comment strong {
  color: var(--karm-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: var(--karm-font) !important;
}
.kairo-review-comment p {
  color: var(--karm-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-family: var(--karm-font) !important;
}

/* ---- Empty state -------------------------------------------------------- */
.kairo-review-empty {
  font-size: 12px !important;
  color: var(--karm-ink-3) !important;
  line-height: 1.5 !important;
  text-align: center !important;
  padding: 28px 18px !important;
}

/* ---- Form --------------------------------------------------------------- */
.kairo-review-form {
  padding: 12px !important;
  border-top: 1px solid var(--karm-border) !important;
  gap: 8px !important;
}

.kairo-review-input {
  background: oklch(0.13 0.018 50) !important;
  border: 1px solid var(--karm-border) !important;
  border-radius: 8px !important;
  color: var(--karm-ink) !important;
  font-family: var(--karm-font) !important;
  font-size: 12px !important;
  padding: 10px !important;
  min-height: 72px !important;
  transition: border-color 140ms ease, box-shadow 140ms ease !important;
}
.kairo-review-input:focus {
  border-color: color-mix(in oklch, #ec193c 55%, var(--karm-border)) !important;
  box-shadow: 0 0 0 4px color-mix(in oklch, #ec193c 14%, transparent) !important;
}

.kairo-review-form-actions { gap: 6px !important; }
/* The two buttons inside form-actions are plain .kairo-review-btn — restyle
   them to read as text buttons (Cancelar / Salvar) instead of icon squares.
   The JS sets the textContent so they already have labels. */
.kairo-review-form-actions .kairo-review-btn {
  width: auto !important;
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--karm-font) !important;
  border-radius: 7px !important;
}
/* The "Salvar" button is the LAST child — paint it red */
.kairo-review-form-actions .kairo-review-btn:last-child {
  background: var(--karm-red) !important;
  border-color: var(--karm-red) !important;
  color: #fff !important;
}
.kairo-review-form-actions .kairo-review-btn:last-child:hover {
  background: var(--karm-red-strong) !important;
  border-color: var(--karm-red-strong) !important;
}
.kairo-review-form-actions .kairo-review-btn:last-child:disabled {
  opacity: 0.6 !important;
  cursor: progress !important;
}
/* Cancelar — quiet ghost */
.kairo-review-form-actions .kairo-review-btn:first-child {
  background: transparent !important;
  border-color: var(--karm-border-s) !important;
  color: var(--karm-ink-2) !important;
}

/* ---- Mention autocomplete dropdown -------------------------------------- */
.kairo-review-form { position: relative !important; }
.kairo-review-mention-dropdown {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 100%;
  margin-bottom: 6px;
  background: var(--karm-shell);
  border: 1px solid var(--karm-border-s);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  max-height: 224px;
  overflow: auto;
  z-index: 10;
  padding: 4px;
  font-family: var(--karm-font);
}
.kairo-review-mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--karm-ink);
}
.kairo-review-mention-item.is-active,
.kairo-review-mention-item:hover {
  background: color-mix(in oklch, #ec193c 14%, transparent);
}
.kairo-review-mention-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--karm-card);
  flex-shrink: 0;
}
.kairo-review-mention-avatar-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--karm-ink-2);
}
.kairo-review-mention-name {
  font-weight: 500;
  color: var(--karm-ink);
}
.kairo-review-mention-email {
  margin-left: auto;
  font-family: var(--karm-mono);
  font-size: 10px;
  color: var(--karm-ink-3);
}
.kairo-review-mention-empty {
  padding: 10px;
  font-size: 11px;
  color: var(--karm-ink-3);
  text-align: center;
}
/* Highlight the "@[Name|UUID]" placeholders subtly while editing — not
   strictly necessary but signals to the user that the mention was applied. */

/* ---- Status line -------------------------------------------------------- */
.kairo-review-status {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--karm-ink-3) !important;
  font-family: var(--karm-font) !important;
}
.kairo-review-status[data-tone="error"]   { color: oklch(0.72 0.13 28) !important; }
.kairo-review-status[data-tone="success"] { color: oklch(0.70 0.13 145) !important; }

/* ---- Stroke color: warm ochre instead of saturated orange --------------
   The canvas paints strokes with ctx.strokeStyle = "#f97316". We can't
   touch the canvas via CSS, but the screenshot-color drift is intentional —
   leave a comment for the future JS patch. Drop the color in the JS as:
       ctx.strokeStyle = "oklch(0.78 0.11 85)";  // warm ochre
*/

/* ---- Header subtitle (KST-042 · 1.8 MB · PNG) ---------------------------- */
.kairo-review-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  padding-left: 14px !important;       /* room for the red dot from ::before */
  position: relative !important;
}
.kairo-review-title-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--karm-red);
  border-radius: 2px;
}
/* Cancel the older ::before on .kairo-review-title — it's now on the wrap */
.kairo-review-title::before { content: none !important; }
.kairo-review-title { padding-left: 0 !important; }
.kairo-review-title-sub {
  font-family: var(--karm-mono) !important;
  font-size: 10px !important;
  color: var(--karm-ink-3) !important;
  letter-spacing: 0.04em !important;
}

/* ---- Toolbar separators -------------------------------------------------- */
.kairo-review-sep {
  width: 1px;
  height: 16px;
  background: var(--karm-border);
  margin: 0 4px;
  align-self: center;
}

/* ---- Stage wrap (anchors fixed overlays outside the scrolling stage) ---- */
.kairo-review-stage-wrap {
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
.kairo-review-stage-wrap > .kairo-review-stage {
  width: 100% !important;
  height: 100% !important;
}

/* ---- Mode hint pill (bottom-left, anchored to stage-wrap so it stays put) */
.kairo-review-stage { position: relative !important; }
.kairo-review-mode-hint {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: oklch(0.16 0.018 50 / 0.9);
  border: 1px solid var(--karm-border);
  color: var(--karm-ink-2);
  font-size: 11px;
  font-family: var(--karm-font);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}
.kairo-review-mode-hint-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--karm-red);
}

/* ---- Zoom badge (top-right of stage) ------------------------------------- */
.kairo-review-zoom-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 6px;
  background: oklch(0.16 0.018 50 / 0.9);
  border: 1px solid var(--karm-border);
  color: var(--karm-ink-3);
  font-family: var(--karm-mono);
  font-size: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}

/* ---- Sidebar header (counter + issue link) ------------------------------- */
.kairo-review-side-head-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
.kairo-review-side-count {
  font-family: var(--karm-mono) !important;
  font-size: 10px !important;
  color: var(--karm-ink-3) !important;
  letter-spacing: 0.02em !important;
}
.kairo-review-side-issue {
  font-family: var(--karm-mono) !important;
  color: var(--karm-red) !important;
}

/* ---- Comment cards: head row (avatar + name + ago) ----------------------- */
.kairo-review-comment-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.kairo-review-comment-avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--karm-red) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: var(--karm-font) !important;
  flex-shrink: 0 !important;
}
.kairo-review-comment-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--karm-ink) !important;
  font-family: var(--karm-font) !important;
}
.kairo-review-comment-ago {
  margin-left: auto !important;
  font-size: 10px !important;
  font-family: var(--karm-mono) !important;
  color: var(--karm-ink-3) !important;
}
.kairo-review-comment-body {
  padding-left: 30px !important;        /* align under avatar */
  margin: 0 !important;
}
.kairo-review-comment-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  font-family: var(--karm-font) !important;
  margin-left: 30px !important;
  margin-top: 6px !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
}
.kairo-review-comment-status svg {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2.4 !important;
}
.kairo-review-comment-status[data-tone="synced"] {
  background: color-mix(in oklch, oklch(0.62 0.13 145) 15%, transparent) !important;
  color: oklch(0.70 0.13 145) !important;
}
.kairo-review-comment-status[data-tone="syncing"] {
  background: color-mix(in oklch, #ec193c 15%, transparent) !important;
  color: var(--karm-red) !important;
}
.kairo-review-comment-status[data-tone="syncing"] svg {
  animation: kairoSpin 1.1s linear infinite;
}
@keyframes kairoSpin { to { transform: rotate(360deg); } }
.kairo-review-comment-status[data-tone="error"] {
  background: color-mix(in oklch, oklch(0.65 0.18 28) 18%, transparent) !important;
  color: oklch(0.78 0.13 28) !important;
}

/* ---- Empty state (sidebar) — icon + CTA ---------------------------------- */
.kairo-review-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 32px !important;
  padding: 0 14px !important;
}
.kairo-review-empty-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px dashed var(--karm-border-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--karm-ink-3);
}
.kairo-review-empty-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kairo-review-empty-cta {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--karm-ink-2) !important;
  text-align: center !important;
}
.kairo-review-accent {
  color: var(--karm-red) !important;
  font-weight: 500 !important;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
  .kairo-review-backdrop { padding: 10px !important; }
  .kairo-review-shell { border-radius: 10px !important; }
  .kairo-review-header { min-height: 56px !important; }
}

/* ---- Light theme variant (modal mirrors Plane's html[data-theme]) -------- */
.kairo-review-backdrop[data-theme="light"] {
  background: oklch(0.10 0.018 50 / 0.55) !important;
  color: oklch(0.18 0.02 50) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-shell {
  background: oklch(0.985 0.006 78) !important;
  border-color: oklch(0.88 0.012 60) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-header,
.kairo-review-backdrop[data-theme="light"] .kairo-review-sidebar,
.kairo-review-backdrop[data-theme="light"] .kairo-review-side-head {
  background: oklch(0.99 0.004 78) !important;
  border-color: oklch(0.88 0.012 60) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-title,
.kairo-review-backdrop[data-theme="light"] .kairo-review-side-title,
.kairo-review-backdrop[data-theme="light"] .kairo-review-comment-name {
  color: oklch(0.18 0.02 50) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-title-sub,
.kairo-review-backdrop[data-theme="light"] .kairo-review-side-note,
.kairo-review-backdrop[data-theme="light"] .kairo-review-side-count,
.kairo-review-backdrop[data-theme="light"] .kairo-review-comment-ago,
.kairo-review-backdrop[data-theme="light"] .kairo-review-comment-body {
  color: oklch(0.42 0.015 50) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-stage {
  background: oklch(0.93 0.012 78) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-image,
.kairo-review-backdrop[data-theme="light"] .kairo-review-video {
  background: oklch(0.93 0.012 78) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-comment {
  background: oklch(0.99 0.004 78) !important;
  border-color: oklch(0.88 0.012 60) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-mode-hint,
.kairo-review-backdrop[data-theme="light"] .kairo-review-zoom-badge {
  background: oklch(0.99 0.004 78 / 0.95) !important;
  border-color: oklch(0.88 0.012 60) !important;
  color: oklch(0.42 0.015 50) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-btn {
  color: oklch(0.18 0.02 50) !important;
  border-color: oklch(0.88 0.012 60) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-btn:hover {
  background: oklch(0.18 0.02 50 / 0.04) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-input {
  background: oklch(0.985 0.006 78) !important;
  border-color: oklch(0.88 0.012 60) !important;
  color: oklch(0.18 0.02 50) !important;
}
.kairo-review-backdrop[data-theme="light"] .kairo-review-sep {
  background: oklch(0.88 0.012 60) !important;
}