/* Content Manager — layout, tabs, panels, form helpers */

/* ── Tabs ── */
.content-manager-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  padding: 0;
  margin-bottom: 24px;
}

.content-manager-tab {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  margin-bottom: -1px;
}

.content-manager-tab:hover {
  color: var(--ink);
}

.content-manager-tab--active {
  color: var(--ink);
  border-bottom-color: var(--accent-deep);
  font-weight: 600;
}

/* ── Panels ── */
.content-manager-panel {
  padding: 0;
}

/* ── Split layout (left prompt / right output) ── */
.content-manager-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

@media (max-width: 768px) {
  .content-manager-split {
    grid-template-columns: 1fr;
  }
}

.content-manager-left,
.content-manager-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Column card wrapper */
.content-manager-col-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.content-manager-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 4px;
}

/* ── Output area ── */
.content-manager-output {
  min-height: 220px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: 16px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.content-manager-empty-hint {
  color: var(--ink-4);
  font-size: 13px;
  font-style: italic;
  margin: auto;
  text-align: center;
  padding: 24px;
}

/* ── Actions row ── */
.content-manager-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ── Quick-start chips ── */
.content-manager-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.content-manager-chips-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.content-manager-chips .chip {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.content-manager-chips .chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent-deep);
  color: var(--ink);
}

/* ── Details/summary (system prompt collapsible) ── */
.content-manager-details {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  background: var(--bg);
}

.content-manager-details summary {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.content-manager-details summary::-webkit-details-marker { display: none; }
.content-manager-details summary::before {
  content: '›';
  font-size: 16px;
  color: var(--ink-4);
  transition: transform 0.15s;
  display: inline-block;
  width: 12px;
  text-align: center;
}
.content-manager-details[open] summary::before { transform: rotate(90deg); }
.content-manager-details[open] summary { color: var(--ink); }
.content-manager-details .form-group { margin-top: 10px; }

/* ── Transform bar ── */
.content-manager-transform {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.content-manager-transform-label {
  font-size: 12px;
  color: var(--ink-4);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Text result wrapper ── */
.content-text-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.content-text-result-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.content-text-results-multi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.content-text-results-multi .content-text-result {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.content-text-result-idx {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-4);
}

/* ── Error / success ── */
.content-manager-error {
  color: var(--bad);
  font-size: 13px;
  padding: 10px 14px;
  background: var(--bad-soft);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent);
}

.content-manager-success {
  color: var(--good);
  font-size: 13px;
  padding: 8px 12px;
  background: var(--good-soft);
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--good) 20%, transparent);
}

/* ── Job pending ── */
.content-manager-job-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  color: var(--ink-3);
  font-size: 13px;
}

.content-manager-job-id {
  font-size: 11px;
  color: var(--ink-4);
  font-family: var(--font-mono);
}

/* ── Image gallery ── */
.content-image-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-image-frame {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.content-image-frame img {
  max-width: 100%;
  height: auto;
  display: block;
}

.content-image-actions {
  display: flex;
  gap: 8px;
}

/* ── Brand Kit layout (sidebar + editor) ── */
.content-manager-brandkit-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 768px) {
  .content-manager-brandkit-layout {
    grid-template-columns: 1fr;
  }
}

.content-manager-brandkit-sidebar {
  position: sticky;
  top: 0;
}

.bk-sidebar-inner {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}

.bk-kit-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bk-kit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
  min-width: 0;
}

.bk-kit-item:hover {
  background: var(--bg-hover);
}

.bk-kit-item--active {
  background: var(--accent-wash);
}

.bk-kit-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--line-2);
}

.bk-kit-swatch--empty {
  background: var(--bg-sunk);
}

.bk-kit-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.bk-kit-company {
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.bk-new-form {
  display: flex;
  gap: 6px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ── Brand Kit editor ── */
.content-manager-brandkit-editor {
  min-width: 0;
}

.content-manager-brandkit-name-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.content-manager-import-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Logo ── */
.bk-logo-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.bk-logo-preview {
  max-height: 48px;
  max-width: 140px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px;
  background: var(--bg);
}

.bk-suggested-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  background: var(--accent-wash);
  border-radius: var(--r-sm);
  border: 1px solid var(--accent-soft);
}

.bk-suggested-logo-img {
  max-height: 36px;
  max-width: 100px;
  object-fit: contain;
}

/* ── Brand Kit ── */
.content-manager-brandkit-section {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 14px;
}

.content-manager-brandkit-section h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 14px;
}

.content-manager-colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 600px) {
  .content-manager-colors {
    grid-template-columns: 1fr;
  }
}

.content-manager-color-input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}

.content-manager-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 600px) {
  .content-manager-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* ── Settings ── */
.content-manager-settings-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin-bottom: 14px;
}

/* ── Toast / saved notice ── */
.content-manager-saved-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--good-soft);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 25%, transparent);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
}

/* ── Spinner (htmx indicator) ── */
.htmx-indicator {
  display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
  align-items: center;
}

.spinner-sm {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cm-spin 0.6s linear infinite;
  display: inline-block;
}

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

/* ── Item cards (slideshows, landing pages) ── */
.content-item-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content-item-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.content-item-card-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-item-card-meta {
  font-size: 11.5px;
  color: var(--ink-4);
  white-space: nowrap;
  flex-shrink: 0;
}

.content-item-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── Image modify section ── */
.content-image-modify {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

/* ── Model hint (replaces the model <select> in content forms) ── */
.composer-model-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.composer-model-hint-value {
  color: var(--ink-2);
  font-weight: 500;
}
.composer-model-hint-tip {
  color: var(--ink-4);
  font-style: italic;
}

/* ── Copy feedback ── */
.btn--copied {
  color: var(--good, #22c55e) !important;
}

/* ── Brand kit text save picker ── */
.bk-text-save-wrap {
  position: relative;
}
.bk-text-picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 260px;
  background: var(--bg-elev2, var(--bg-elev));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.12));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bk-text-picker-status {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
}
.bk-text-picker-inner {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bk-text-picker-select {
  width: 100%;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-base);
  color: var(--ink);
  cursor: pointer;
}
.bk-text-picker-label-input {
  width: 100%;
  font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-base);
  color: var(--ink);
  box-sizing: border-box;
}
.bk-text-picker-label-input::placeholder {
  color: var(--ink-4);
}
.bk-text-picker-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.bk-text-picker-error {
  font-size: 12px;
  color: var(--bad);
  margin: 0;
}

/* ── Brand kit saved texts list ── */
.bk-texts-section {
  margin-top: 20px;
}
.bk-texts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bk-text-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
}
.bk-text-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bk-text-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bk-text-preview {
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-texts-empty {
  font-size: 13px;
  color: var(--ink-4);
  margin: 0;
}

/* ── View header for content manager ── */
.content-manager-view-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--pad-x) 40px;
}

/* ── Image Canvas Editor ── */
.ci-canvas-editor {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ci-canvas-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.ci-canvas-main {
  display: flex;
  position: relative;
}

.ci-canvas-wrap {
  position: relative;
  flex: 1;
  line-height: 0;
  overflow: hidden;
  user-select: none;
  min-height: 200px;
  background: #1a1a1a;
}

.ci-canvas-wrap.ci-cursor-text {
  cursor: crosshair;
}

.ci-canvas-img {
  max-width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* True canvas editor */
.ci-canvas-area {
  position: relative;
  flex: 1;
  background: #1a1a1a;
  line-height: 0;
  overflow: hidden;
  min-height: 200px;
  user-select: none;
}

.ci-canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inline text edit overlay — positioned absolutely over canvas */
.ci-edit-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.12);
  border: 1.5px dashed rgba(255, 255, 255, 0.65);
  border-radius: 3px;
  outline: none;
  resize: none;
  caret-color: #ffffff;
  font-family: sans-serif;
  line-height: 1.2;
  padding: 4px 6px;
  z-index: 20;
  overflow: hidden;
  color: inherit;
  backdrop-filter: blur(1px);
}

/* Text input in properties panel */
.ci-text-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-sunk, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-sm, 4px);
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
}
.ci-text-input:focus {
  outline: 2px solid var(--accent-deep, #4f8ef7);
  outline-offset: 1px;
}

/* Toolbar separator */
.ci-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--line, #e2e8f0);
  margin: 0 2px;
  flex-shrink: 0;
}

/* Text layers */
.ci-layer {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  transform: translateY(-50%);
  z-index: 10;
}

.ci-layer--selected .ci-layer-input {
  outline: 2px solid var(--accent-deep);
  outline-offset: 1px;
}

.ci-drag-handle {
  cursor: grab;
  color: white !important;
  font-size: 14px !important;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  padding: 2px 4px;
  background: rgba(0,0,0,.45);
  border-radius: 3px;
  flex-shrink: 0;
  user-select: none;
}
.ci-drag-handle:active {
  cursor: grabbing;
}

.ci-layer-input {
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.7), 0 0 8px rgba(0,0,0,.5);
  padding: 0;
  min-width: 60px;
  max-width: 380px;
  line-height: 1.1;
}
.ci-layer-input::placeholder {
  color: rgba(255,255,255,.5);
}

.ci-layer-delete {
  cursor: pointer;
  color: white !important;
  font-size: 15px !important;
  line-height: 1;
  padding: 1px 5px;
  background: rgba(180,0,0,.75);
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  display: none;
}
.ci-layer--selected .ci-layer-delete {
  display: block;
}

/* Layers panel */
.ci-layers-panel {
  width: 175px;
  flex-shrink: 0;
  background: var(--bg-elev);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow-y: auto;
}

.ci-layers-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 8px 10px 6px;
  margin: 0;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ci-layer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
  flex-shrink: 0;
}
.ci-layer-item:hover { background: var(--bg-hover); }
.ci-layer-item--selected { background: var(--accent-wash); }

.ci-layer-vis {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 2px;
  font-size: 12px;
  flex-shrink: 0;
}

.ci-layer-item-name {
  flex: 1;
  font-size: 11.5px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ci-layer-del {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 4px;
  font-size: 14px;
  color: var(--ink-4);
  flex-shrink: 0;
  transition: color .1s;
  line-height: 1;
}
.ci-layer-del:hover { color: var(--bad); }

.ci-layer-props {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.ci-prop-label {
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ci-prop-label input[type=range] { flex: 1; accent-color: var(--accent-deep); }
.ci-prop-label input[type=color] {
  width: 30px; height: 22px; padding: 1px;
  border: 1px solid var(--line-2); border-radius: 3px;
  cursor: pointer; background: none;
}

.ci-layer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: var(--accent-deep);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 8px;
  margin-left: 2px;
  vertical-align: middle;
}

/* ── Debug panel ── */
.ci-debug-panel {
  margin-bottom: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: var(--bg-elev, #f8fafc);
  font-size: 12px;
}

.ci-debug-checks {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ci-debug-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #64748b);
}

.ci-debug-check--ok {
  color: #16a34a;
}

.ci-debug-check--no {
  color: #dc2626;
}

.ci-debug-ref-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--line, #e2e8f0);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

.ci-debug-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ci-debug-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ci-debug-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ci-debug-ref-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.ci-debug-ref-img {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 4px;
  background: #fff;
}

.ci-debug-ref-link {
  color: var(--accent, #6366f1);
  opacity: .7;
  margin-top: 2px;
}
.ci-debug-ref-link:hover { opacity: 1; }

.ci-debug-pre {
  margin: 0;
  padding: 8px 10px;
  background: var(--bg-code, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text-primary, #1e293b);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Canvas shake animation ── */
@keyframes ci-shake {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-5px) rotate(-0.4deg); }
  40%      { transform: translateX(5px) rotate(0.4deg); }
  60%      { transform: translateX(-3px) rotate(-0.2deg); }
  80%      { transform: translateX(3px) rotate(0.2deg); }
}
.ci-shake {
  animation: ci-shake 0.5s ease-in-out;
}

/* ── Layer role badge ── */
.ci-layer-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--accent-wash, #ede9fe);
  color: var(--accent-deep, #7c3aed);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Heading layer style ── */
.ci-layer--heading .ci-layer-input {
  font-weight: 700;
}

/* ── Align buttons ── */
.ci-align-btns {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.ci-align-btn {
  flex: 1;
  padding: 3px 0;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 4px;
  background: var(--bg-card, #fff);
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted, #64748b);
  transition: background .15s, color .15s;
}
.ci-align-btn:hover { background: var(--bg-hover, #f1f5f9); }
.ci-align-btn--active {
  background: var(--accent-wash, #ede9fe);
  color: var(--accent-deep, #7c3aed);
  border-color: var(--accent, #8b5cf6);
}

/* ── Inline row prop (checkbox + label) ── */
.ci-prop-label--row {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ── Image chat section ── */
.ci-chat-section {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}

.ci-chat-invite {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.ci-chat-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ci-chat-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-sunk, #f8fafc);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: var(--r-sm, 4px);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text-primary, #1e293b);
}
.ci-chat-input:focus {
  outline: 2px solid var(--accent-deep, #4f8ef7);
  outline-offset: 1px;
}

.ci-chat-output {
  margin-top: 8px;
  min-height: 0;
}

/* Classification result badge */
.ci-chat-result {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}
.ci-chat-result--empty {
  color: var(--text-muted);
}
.ci-chat-result--error {
  color: var(--red-500, #ef4444);
}

.ci-chat-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft, #e8f0fe);
  color: var(--accent-deep, #4f8ef7);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.ci-chat-applied {
  color: var(--text-muted);
  font-size: 12px;
}