/* When pipeline is active, make content fill viewport without scroll.
   Reserve 40px at the bottom for the fixed #sysbar. */
body.pipeline-active .content {
  overflow: hidden;
  padding: 0 0 40px 0;
}
body.pipeline-active #section-pipeline.active {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pl-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  background: #0a0e1a;
  border-radius: 0;
  border: none;
  overflow: hidden;
}

/* Top bar */
.pl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: linear-gradient(to right, #0d1225, #141a35);
  border-bottom: 1px solid #1a2040;
  flex-shrink: 0;
  min-height: 34px;
}

.pl-topbar-left { display: flex; align-items: center; gap: 16px; }
.pl-topbar-center { display: flex; align-items: center; }
.pl-topbar-right { display: flex; align-items: center; gap: 10px; }

.pl-logo {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7eb8e0;
  letter-spacing: 0.08em;
}

.pl-map-name {
  font-size: 0.68rem;
  color: #5a6a8a;
  font-weight: 500;
}

.pl-zoom-label {
  font-size: 0.72rem;
  color: #5a7a9a;
  font-weight: 600;
  background: rgba(30,50,80,0.5);
  padding: 3px 12px;
  border-radius: 6px;
}

.pl-btn {
  background: rgba(30,50,80,0.5);
  border: 1px solid #1a2a50;
  color: #7eb8e0;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s;
}

.pl-btn:hover { background: rgba(50,80,120,0.5); }

/* Live toggle switch */
.pl-live-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pl-live-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #5a6a8a;
  letter-spacing: 0.05em;
}

.pl-live-label.active {
  color: #22c55e;
  text-shadow: 0 0 8px rgba(34,197,94,0.5);
}

.pl-switch {
  position: relative;
  width: 36px;
  height: 18px;
  display: inline-block;
}

.pl-switch input { display: none; }

.pl-switch-slider {
  position: absolute;
  inset: 0;
  background: #1a2a40;
  border-radius: 18px;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid #2a3a60;
}

.pl-switch-slider::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5a6a8a;
  left: 2px;
  top: 2px;
  transition: all 0.3s;
}

.pl-switch input:checked + .pl-switch-slider {
  background: rgba(34,197,94,0.3);
  border-color: #22c55e;
}

.pl-switch input:checked + .pl-switch-slider::before {
  transform: translateX(18px);
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
}

/* Body layout */
.pl-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Side panels */
.pl-panel {
  width: 168px;
  min-width: 168px;
  background: #0d1225;
  border-right: 1px solid #1a2040;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.65rem;
}

.pl-panel-right {
  border-right: none;
  border-left: 1px solid #1a2040;
  position: relative;
}

/* Resize handle on the left edge of the right panel */
.pl-panel-resize {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: 100%;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
}
.pl-panel-resize:hover,
.pl-panel-resize.dragging {
  background: rgba(126,184,224,0.25);
}

/* Chat resize handle (top edge) */
.pl-chat-resize {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 6px;
  cursor: ns-resize;
  z-index: 40;
  background: transparent;
  transition: background 0.15s;
}
.pl-chat-resize:hover,
.pl-chat-resize.dragging {
  background: rgba(167,139,250,0.3);
}

.pl-panel-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #5a7a9a;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pl-label {
  font-size: 0.65rem;
  color: #5a6a8a;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.pl-range {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #1a2a40;
  border-radius: 4px;
  outline: none;
}

.pl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7eb8e0;
  cursor: pointer;
  border: 2px solid #0d1225;
}

.pl-control-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.pl-btn-sm {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  background: #1a2a40;
  border: 1px solid #2a3a60;
  color: #7eb8e0;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-btn-sm:hover { background: #2a3a60; }

/* Post-it action button — yellow to stand out in the toolbar, matching
   the n8n-style sticky note feel. */
.pl-btn-postit-action {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
.pl-btn-postit-action:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: rgba(251, 191, 36, 0.7);
  color: #fde68a;
}

/* Icon buttons (undo / redo) — same dark-blue base as other toolbar
   buttons but with the SVG icon centered alongside the label. */
.pl-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pl-btn-icon svg {
  flex-shrink: 0;
  opacity: 0.9;
}
.pl-btn-icon:hover svg { opacity: 1; }

.pl-btn-accent {
  background: rgba(124,58,237,0.2);
  border-color: rgba(124,58,237,0.4);
  color: #a78bfa;
  width: 100%;
}

.pl-btn-accent:hover { background: rgba(124,58,237,0.35); }

/* Filter list */
.pl-filter-list { display: flex; flex-direction: column; gap: 4px; }

.pl-filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: #8a9ab0;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background 0.15s;
}

.pl-filter-item:hover { background: rgba(255,255,255,0.04); }

.pl-filter-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Map versions list */
.pl-maps-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.pl-map-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #1a2040;
  border: 1px solid #2a3060;
  border-radius: 6px;
  font-size: 0.68rem;
  cursor: pointer;
  transition: all 0.15s;
}

.pl-map-item:hover { border-color: #7eb8e0; }

.pl-map-item.active {
  border-color: #22c55e;
  background: rgba(34,197,94,0.08);
}

.pl-map-item-name {
  color: #c0d0e8;
  font-weight: 600;
}

.pl-map-item-date {
  color: #5a6a8a;
  font-size: 0.6rem;
}

.pl-map-restore {
  padding: 2px 8px;
  font-size: 0.58rem;
  font-weight: 700;
  background: rgba(126,184,224,0.15);
  border: 1px solid rgba(126,184,224,0.3);
  color: #7eb8e0;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.pl-map-restore:hover { background: rgba(126,184,224,0.3); }

.pl-map-delete {
  padding: 2px 6px;
  font-size: 0.58rem;
  background: none;
  border: none;
  color: #5a6a8a;
  cursor: pointer;
}

.pl-map-delete:hover { color: #ef4444; }

/* Loader overlay — covers the canvas area while data is being fetched */
.pl-loader {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(ellipse at center, rgba(20,30,60,0.95) 0%, #0a0e1a 70%);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: all;
}
.pl-loader.hidden {
  opacity: 0;
  pointer-events: none;
}
.pl-loader-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(126,184,224,0.15);
  border-top-color: #a78bfa;
  border-right-color: #7eb8e0;
  animation: pl-spin 0.9s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
.pl-loader-text {
  font-size: 0.72rem;
  font-weight: 700;
  color: #7eb8e0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pl-loader-sub {
  font-size: 0.62rem;
  color: #5a7a9a;
  font-family: 'Cascadia Code', monospace;
}
.pl-nodes-hidden .pl-node,
.pl-nodes-hidden #pl-canvas { visibility: hidden; }

/* Canvas area */
.pl-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  /* Default cursor on empty canvas — nothing hinted until the user actually
     presses a mouse button. Grabbing only shows during an active pan. */
  cursor: default;
  background:
    radial-gradient(ellipse at center, rgba(20,30,60,0.8) 0%, #0a0e1a 70%);
}

.pl-canvas-area.pl-panning,
.pl-canvas-area.pl-panning * { cursor: grabbing !important; }

#pl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.pl-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

/* Post-it layer sits between the canvas (grid/edges) and the nodes layer,
   so post-it frames appear BEHIND nodes but above the background. */
.pl-postits-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.pl-postit {
  position: absolute;
  top: 0;
  left: 0;
  /* Same transform pipeline as .pl-node — default transform-origin 50% 50%
     so the post-it scales symmetrically around its center, identical to
     how node cards expand. The JS then treats (wx, wy) as the natural
     top-left anchor and lets the browser handle the center-based scale. */
  background: transparent;
  border: 2.5px dashed currentColor;
  border-radius: 16px;
  /* color is set inline via JS (postit color from palette) */
  pointer-events: none;
}
.pl-postit-handle {
  position: absolute;
  pointer-events: auto;
}
/* Move handle = the entire dashed border frame (thin ring around edges). */
.pl-postit-move {
  top: -8px; left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  cursor: grab;
  border-radius: 20px;
  background: transparent;
}
.pl-postit-move::before {
  /* An inner transparent ring that the user can grab. We punch a hole in
     the middle so clicks on the interior pass through to nodes. */
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  pointer-events: none;
}
/* Interior of the post-it is click-through: pointer-events none on the move
   handle's center area. We achieve that by narrowing the move handle to
   only the border strip via a mask-like trick — instead, we set pointer
   events only on the 4 edge strips explicitly. */
.pl-postit::before {
  /* Top edge */
  content: '';
  position: absolute;
  top: -6px; left: 0; right: 0; height: 12px;
  pointer-events: auto;
  cursor: grab;
}
.pl-postit::after {
  /* Bottom edge */
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0; height: 12px;
  pointer-events: auto;
  cursor: grab;
}
/* We need vertical sides too — use the .pl-postit-move handle repurposed
   as the left strip, and a separate span for the right. Simpler: give the
   .pl-postit-move handle pointer-events only on the border via a computed
   mask. Chromium supports `-webkit-mask` but the dashed-border approach
   doesn't work with mask well. Alternative: just make the frame fully
   grabbable and accept that clicks on the interior drag it too (the user
   can always grab nodes directly since nodes have a higher z-index). */
.pl-postit-move { pointer-events: auto; background: transparent; }
.pl-postit.pl-postit-dragging { opacity: 0.85; }
.pl-postit.pl-postit-dragging .pl-postit-move { cursor: grabbing; }

.pl-postit-resize {
  right: -6px; bottom: -6px;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background: transparent;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 0 0 6px 0;
  opacity: 0;
  transition: opacity 0.15s;
}
.pl-postit:hover .pl-postit-resize,
.pl-postit.pl-postit-dragging .pl-postit-resize {
  opacity: 1;
}

.pl-postit-btn {
  position: absolute;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: #0a0e1a;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s, transform 0.15s;
}
.pl-postit:hover .pl-postit-btn {
  opacity: 1;
  transform: scale(1);
}
.pl-postit-del {
  top: -10px; right: -10px;
}
.pl-postit-color {
  top: -10px; right: 14px;
}
.pl-postit-btn:hover {
  background: currentColor;
  color: #0a0e1a;
}

/* Node cards */
.pl-node {
  position: absolute;
  pointer-events: auto;
  /* Over a container/agent, the cursor becomes a normal arrow so the user
     sees it's clickable. The pan-hand (grab/grabbing) belongs to the empty
     canvas area, not to the nodes themselves. */
  cursor: default;
  user-select: none;
  transition: box-shadow 0.2s;
  z-index: 2;
}

/* While a node is being dragged, flip to the closed-hand "grabbing" cursor
   to give a tactile feedback — the user is actively moving the card. */
.pl-node.pl-node-dragging,
.pl-node.pl-node-dragging * { cursor: grabbing !important; }

.pl-node.selected { z-index: 50; }

.pl-node-card {
  background: linear-gradient(135deg, #141e35, #1a2845);
  border: 1.5px solid #2a3a60;
  border-radius: 10px;
  padding: 24px 14px 12px 14px;
  min-width: 150px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pl-node:hover .pl-node-card,
.pl-node.selected .pl-node-card {
  border-color: #7eb8e0;
  box-shadow: 0 0 20px rgba(126,184,224,0.15);
}

.pl-node-health {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #141e35;
}

.pl-node-health.healthy { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }
.pl-node-health.unhealthy { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.pl-node-health.starting { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.5); }

.pl-node-icon {
  font-size: 1.2rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pl-node-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #dce8f4;
  margin-bottom: 2px;
  white-space: nowrap;
}

.pl-node-image {
  font-size: 0.58rem;
  color: #5a7a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.pl-node-ports {
  font-size: 0.56rem;
  color: #4a6a8a;
  margin-top: 3px;
}

.pl-node-type-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  z-index: 1;
}

.pl-node-type-badge.type-container {
  background: rgba(126,184,224,0.15);
  color: #7eb8e0;
}

.pl-node-type-badge.type-agent {
  background: rgba(124,58,237,0.2);
  color: #a78bfa;
}

/* Live metrics overlay on nodes */
.pl-node-metrics {
  display: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #2a3a60;
}

.pl-node.live-mode .pl-node-metrics { display: block; }

.pl-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.58rem;
  margin-bottom: 3px;
}

.pl-metric-label { color: #5a7a9a; }
.pl-metric-value { color: #7eb8e0; font-weight: 600; font-family: monospace; }

.pl-metric-bar {
  width: 100%;
  height: 3px;
  background: #1a2a40;
  border-radius: 2px;
  margin-top: 1px;
  overflow: hidden;
}

.pl-metric-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.pl-metric-fill.cpu { background: #3b82f6; }
.pl-metric-fill.mem { background: #a78bfa; }
.pl-metric-fill.net { background: #22c55e; }

/* Info panel */
.pl-info-body {
  font-size: 0.7rem;
}

.pl-info-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pl-info-label { color: #5a7a9a; }
.pl-info-value { color: #c0d0e8; font-weight: 500; }

/* Action buttons inside the info panel (export / delete chat history) */
.pl-info-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.pl-info-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(126, 184, 224, 0.08);
  border: 1px solid rgba(126, 184, 224, 0.2);
  border-radius: 6px;
  color: #c0d0e8;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.pl-info-btn:hover:not(:disabled) {
  background: rgba(126, 184, 224, 0.18);
  border-color: rgba(126, 184, 224, 0.4);
  color: #dce8f4;
}
.pl-info-btn:active:not(:disabled) { transform: scale(0.97); }
.pl-info-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pl-info-btn svg { flex-shrink: 0; }
.pl-info-btn-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: #f87171;
}
.pl-info-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

/* Live panel */
.pl-live-panel {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 380px;
  background: rgba(13,18,37,0.95);
  border: 1px solid #1a2a50;
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  z-index: 20;
  max-height: 280px;
}

.pl-live-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #1a2a50;
  font-size: 0.7rem;
  font-weight: 700;
  color: #22c55e;
}

.pl-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: pl-live-blink 1s ease-in-out infinite;
}

@keyframes pl-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.pl-live-title {
  color: #7eb8e0;
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
}

.pl-live-body {
  padding: 10px 12px;
  font-size: 0.65rem;
  color: #8a9ab0;
  max-height: 220px;
  overflow-y: auto;
  font-family: 'Cascadia Code', monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Grab & Move hint */
.pl-grab-hint {
  position: absolute;
  padding: 4px 10px;
  background: rgba(126,184,224,0.15);
  border: 1px solid rgba(126,184,224,0.3);
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #7eb8e0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 200;
}

/* Active node animation (thinking/streaming) */
.pl-node-active .pl-node-card {
  border-color: #a78bfa !important;
  box-shadow: 0 0 24px rgba(167,139,250,0.35), inset 0 0 12px rgba(167,139,250,0.08) !important;
  animation: pl-node-pulse 1.5s ease-in-out infinite;
}

@keyframes pl-node-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(167,139,250,0.3); }
  50% { box-shadow: 0 0 35px rgba(167,139,250,0.5), 0 0 60px rgba(167,139,250,0.15); }
}

/* ===== CHAT PANEL ===== */
.pl-chat-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 380px;
  background: #0a0e1a;
  border-top: 1.5px solid #1e2850;
  display: flex;
  flex-direction: column;
  z-index: 300;
  /* No transition — entry/exit are keyframe animations so they can't be
     defeated by style-batching races the way transitions can. */
}

@keyframes pl-chat-slide-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pl-chat-slide-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(100%); }
}
.pl-chat-panel-enter {
  animation: pl-chat-slide-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.pl-chat-panel-leave {
  animation: pl-chat-slide-out 0.25s ease-in both;
  pointer-events: none;
}

/* Header */
.pl-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(to right, #0d1225, #151b38);
  border-bottom: 1px solid #1e2850;
  flex-shrink: 0;
}

.pl-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pl-chat-header-center { flex: 1; display: flex; justify-content: center; }
.pl-chat-header-right { display: flex; align-items: center; gap: 6px; }

.pl-chat-agent-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 10px rgba(167,139,250,0.5);
  animation: pl-live-blink 1.5s ease-in-out infinite;
}

.pl-chat-agent-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #dce8f4;
  letter-spacing: 0.02em;
}

.pl-chat-agent-role {
  font-size: 0.62rem;
  color: #5a7a9a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(167,139,250,0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.pl-chat-model-select {
  background: #1a2040;
  border: 1px solid #2a3a60;
  color: #8a9ab0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  min-width: 180px;
  transition: border-color 0.15s;
}

.pl-chat-model-select:focus { border-color: #a78bfa; }
.pl-chat-model-select option { background: #0d1225; color: #c0d0e8; }

.pl-chat-btn-clear,
.pl-chat-btn-close {
  background: none;
  border: 1px solid transparent;
  color: #5a6a8a;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}

.pl-chat-btn-clear:hover { color: #f97316; border-color: rgba(249,115,22,0.3); }
.pl-chat-btn-close:hover { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* Messages */
.pl-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.pl-chat-messages::-webkit-scrollbar { width: 5px; }
.pl-chat-messages::-webkit-scrollbar-track { background: transparent; }
.pl-chat-messages::-webkit-scrollbar-thumb { background: #2a3a60; border-radius: 3px; }

.pl-chat-msg {
  display: flex;
  gap: 10px;
  max-width: 90%;
  animation: pl-chat-fade-in 0.25s ease;
}

@keyframes pl-chat-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pl-chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.pl-chat-msg-assistant { align-self: flex-start; }
.pl-chat-msg-system { align-self: center; max-width: 100%; }

.pl-chat-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}

.pl-chat-avatar-user {
  background: rgba(59,130,246,0.2);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.3);
}

.pl-chat-avatar-agent {
  background: rgba(167,139,250,0.2);
  color: #a78bfa;
  border: 1px solid rgba(167,139,250,0.3);
}

.pl-chat-avatar-system {
  background: rgba(90,106,138,0.15);
  color: #5a6a8a;
  border: 1px solid rgba(90,106,138,0.2);
  font-size: 0.8rem;
}

.pl-chat-msg-body {
  flex: 1;
  min-width: 0;
}

.pl-chat-msg-content {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #c0d0e8;
  word-break: break-word;
}

.pl-chat-msg-user .pl-chat-msg-content {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08));
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 12px 12px 4px 12px;
}

.pl-chat-msg-assistant .pl-chat-msg-content {
  background: linear-gradient(135deg, rgba(167,139,250,0.1), rgba(167,139,250,0.04));
  border: 1px solid rgba(167,139,250,0.15);
  border-radius: 12px 12px 12px 4px;
}

.pl-chat-msg-info .pl-chat-msg-content {
  background: rgba(90,106,138,0.08);
  border: 1px solid rgba(90,106,138,0.12);
  border-radius: 8px;
  font-size: 0.68rem;
  color: #5a7a9a;
  padding: 6px 12px;
  text-align: center;
}

.pl-chat-msg-streaming .pl-chat-msg-content {
  border-color: rgba(167,139,250,0.3);
}

/* Tool call chips (OpenClaw tool-use trace) */
.pl-chat-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.pl-chat-tool {
  display: flex;
  flex-direction: column;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 8px;
  font-size: 0.68rem;
  color: #c4b5fd;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.pl-chat-tool-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  cursor: pointer;
  user-select: none;
}
.pl-chat-tool-head:hover {
  background: rgba(167, 139, 250, 0.1);
}
.pl-chat-tool-chevron {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform 0.18s ease;
  opacity: 0.65;
}
.pl-chat-tool-expanded .pl-chat-tool-chevron {
  transform: rotate(90deg);
  opacity: 1;
}
.pl-chat-tool-running {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}
.pl-chat-tool-done {
  background: rgba(34, 197, 94, 0.07);
  border-color: rgba(34, 197, 94, 0.25);
  color: #86efac;
}
.pl-chat-tool-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.pl-chat-tool-badge {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.pl-chat-tool-running .pl-chat-tool-badge { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.pl-chat-tool-done    .pl-chat-tool-badge { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.pl-chat-tool-name {
  font-weight: 600;
}
.pl-chat-tool-sub {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.15);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  font-size: 0.64rem;
}
.pl-chat-tool-meta {
  margin-left: auto;
  color: #8a9ab0;
  font-size: 0.6rem;
  font-weight: 500;
  flex-shrink: 0;
}
.pl-chat-tool-meta-live {
  color: #fbbf24;
  animation: pl-tool-pulse 1.4s ease-in-out infinite;
}
@keyframes pl-tool-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Expanded tool details body */
.pl-chat-tool-body {
  border-top: 1px solid rgba(167, 139, 250, 0.18);
  padding: 8px 12px 10px 12px;
  background: rgba(10, 14, 26, 0.45);
  color: #c0d0e8;
  font-size: 0.62rem;
  line-height: 1.45;
}
.pl-chat-tool-done .pl-chat-tool-body { border-top-color: rgba(34, 197, 94, 0.18); }
.pl-chat-tool-running .pl-chat-tool-body { border-top-color: rgba(245, 158, 11, 0.22); }
.pl-chat-tool-section {
  margin-bottom: 8px;
}
.pl-chat-tool-section:last-child { margin-bottom: 0; }
.pl-chat-tool-label {
  color: #7eb8e0;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 3px;
}
.pl-chat-tool-json {
  background: rgba(5, 8, 18, 0.8);
  border: 1px solid rgba(126, 184, 224, 0.15);
  border-radius: 5px;
  padding: 8px 10px;
  margin: 0;
  max-height: 260px;
  overflow: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.62rem;
  color: #dce8f4;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: #2a3a60 transparent;
}
.pl-chat-tool-json::-webkit-scrollbar { width: 5px; height: 5px; }
.pl-chat-tool-json::-webkit-scrollbar-thumb { background: #2a3a60; border-radius: 3px; }
.pl-chat-tool-foot {
  margin-top: 6px;
  color: #6a7a9a;
  font-size: 0.58rem;
}
.pl-chat-tool-foot code {
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.56rem;
}
@keyframes pl-tool-spin {
  to { transform: rotate(360deg); }
}
.pl-chat-tool-icon .pl-spin {
  transform-origin: 12px 12px;
  animation: pl-tool-spin 0.9s linear infinite;
}

/* Message footer (meta + delete button) sits below each bubble */
.pl-chat-msg-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 6px;
}
.pl-chat-msg-user .pl-chat-msg-footer {
  /* User bubble sits on the right edge with the avatar on the far right.
     Align the footer to the right and keep the natural order (meta, then
     trash) so the trash ends up closest to the user's avatar. */
  justify-content: flex-end;
}
.pl-chat-msg-footer .pl-chat-msg-meta {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.6rem;
  color: #5a7a9a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.pl-chat-msg-footer .pl-meta-role {
  color: #c0d0e8;
  font-weight: 700;
}
.pl-chat-msg-footer .pl-meta-time {
  color: #6a7a9a;
}
.pl-chat-msg-footer .pl-meta-tok {
  color: #6a8aae;
}
.pl-chat-msg-footer .pl-meta-model {
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.56rem;
  font-weight: 600;
}
.pl-chat-msg-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(239, 68, 68, 0.22);
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  cursor: pointer;
  padding: 0;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.pl-chat-msg-del:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.22);
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.5);
}
.pl-chat-msg-del:active {
  transform: scale(0.92);
}

/* ===== Markdown rendering inside assistant messages ===== */
.pl-chat-msg-content .pl-md-h1,
.pl-chat-msg-content .pl-md-h2,
.pl-chat-msg-content .pl-md-h3,
.pl-chat-msg-content .pl-md-h4 {
  margin: 0.6em 0 0.35em;
  font-weight: 700;
  color: #e8eefc;
  line-height: 1.3;
}
.pl-chat-msg-content .pl-md-h1 { font-size: 1.1rem; color: #a78bfa; }
.pl-chat-msg-content .pl-md-h2 { font-size: 0.98rem; color: #c4b5fd; }
.pl-chat-msg-content .pl-md-h3 { font-size: 0.88rem; color: #dce8f4; }
.pl-chat-msg-content .pl-md-h4 { font-size: 0.82rem; color: #b8c8e0; text-transform: uppercase; letter-spacing: 0.04em; }
.pl-chat-msg-content .pl-md-h1:first-child,
.pl-chat-msg-content .pl-md-h2:first-child,
.pl-chat-msg-content .pl-md-h3:first-child,
.pl-chat-msg-content .pl-md-h4:first-child { margin-top: 0; }

.pl-chat-msg-content .pl-md-ul,
.pl-chat-msg-content .pl-md-ol {
  margin: 0.35em 0;
  padding-left: 1.4em;
}
.pl-chat-msg-content .pl-md-ul li,
.pl-chat-msg-content .pl-md-ol li {
  margin: 0.15em 0;
}
.pl-chat-msg-content .pl-md-ul { list-style: disc; }
.pl-chat-msg-content .pl-md-ol { list-style: decimal; }

.pl-chat-msg-content strong {
  color: #f0e8ff;
  font-weight: 700;
}
.pl-chat-msg-content em {
  color: #c8d8ec;
  font-style: italic;
}

.pl-chat-msg-content .pl-md-code {
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
  color: #e8d8ff;
}

.pl-chat-msg-content .pl-md-pre {
  background: rgba(10, 14, 26, 0.85);
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0.5em 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  color: #dce8f4;
  line-height: 1.45;
}
.pl-chat-msg-content .pl-md-pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.pl-chat-msg-content .pl-md-quote {
  border-left: 3px solid rgba(167, 139, 250, 0.4);
  margin: 0.4em 0;
  padding: 0.15em 0.8em;
  color: #a8b8d0;
  font-style: italic;
}

.pl-chat-msg-content .pl-md-hr {
  border: none;
  border-top: 1px solid rgba(167, 139, 250, 0.2);
  margin: 0.8em 0;
}

.pl-chat-msg-content a {
  color: #93c5fd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pl-chat-msg-content a:hover {
  color: #bfdbfe;
}

.pl-chat-msg-meta {
  font-size: 0.58rem;
  color: #3a4a6a;
  margin-top: 3px;
  padding-left: 14px;
}

.pl-chat-cursor {
  display: inline;
  color: #a78bfa;
  animation: pl-blink 0.8s step-end infinite;
}

@keyframes pl-blink {
  50% { opacity: 0; }
}

/* Input area */
.pl-chat-input-area {
  padding: 10px 16px;
  border-top: 1px solid #1e2850;
  background: #0d1225;
  flex-shrink: 0;
}

.pl-chat-refresh-row {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
}

.pl-chat-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.3);
  border-radius: 8px;
  color: #a78bfa;
  font-size: 0.72rem;
  font-family: inherit;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pl-chat-refresh-btn:hover {
  background: rgba(167,139,250,0.22);
  border-color: rgba(167,139,250,0.5);
}

.pl-chat-refresh-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.pl-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #141a35;
  border: 1.5px solid #2a3a60;
  border-radius: 12px;
  padding: 6px 8px 6px 14px;
  transition: border-color 0.2s;
}

.pl-chat-input-wrap:focus-within {
  border-color: #a78bfa;
  box-shadow: 0 0 12px rgba(167,139,250,0.1);
}

.pl-chat-input {
  flex: 1;
  background: none;
  border: none;
  color: #dce8f4;
  font-size: 0.8rem;
  resize: none;
  outline: none;
  padding: 4px 0;
  line-height: 1.5;
  font-family: inherit;
  /* Lock to a single-line-ish input — no resize handle, no scrollbar */
  min-height: 24px;
  max-height: 24px;
  height: 24px;
  overflow: hidden;
}

.pl-chat-input::placeholder {
  color: #3a4a6a;
}

.pl-chat-send {
  background: rgba(167,139,250,0.2);
  border: 1px solid rgba(167,139,250,0.3);
  color: #a78bfa;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}

.pl-chat-send:hover {
  background: rgba(167,139,250,0.35);
  transform: scale(1.05);
}

.pl-chat-send:active {
  transform: scale(0.95);
}

/* Jump-to-bottom button — styled exactly like .pl-chat-send (same violet
   palette, same border-radius, same hover feel) so the input row looks
   cohesive. Hidden by default, fades in when the user scrolls up. */
.pl-chat-scrollbtm {
  background: rgba(167, 139, 250, 0.2);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #a78bfa;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px) scale(0.92);
  transition: opacity 0.18s, transform 0.18s, background 0.15s, border-color 0.15s, color 0.15s;
}
.pl-chat-scrollbtm.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.pl-chat-scrollbtm:hover {
  background: rgba(167, 139, 250, 0.35);
  border-color: rgba(167, 139, 250, 0.5);
  color: #c4b5fd;
  transform: translateY(0) scale(1.05);
}
.pl-chat-scrollbtm:active { transform: scale(0.92); }

/* Multi-select highlight */
.pl-node.selected .pl-node-card {
  border-color: #3b82f6;
  box-shadow: 0 0 16px rgba(59,130,246,0.2);
}

/* Small save icon button (replaces big SAVE CURRENT) */
.pl-btn-save-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.58rem;
  font-weight: 700;
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.35);
  color: #a78bfa;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.04em;
  align-self: flex-start;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.pl-btn-save-sm:hover { background: rgba(124,58,237,0.32); }

/* Map item: stacked with description + edit */
.pl-map-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px 8px;
}
.pl-map-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.pl-map-item-desc {
  color: #6a7a9a;
  font-size: 0.56rem;
  line-height: 1.25;
  max-height: 1.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-map-edit {
  padding: 2px 6px;
  font-size: 0.58rem;
  background: none;
  border: none;
  color: #7eb8e0;
  cursor: pointer;
}
.pl-map-edit:hover { color: #a78bfa; }

/* Chat panel is scoped to the canvas area — never overlaps left/right panels */
.pl-canvas-area { position: relative; }
.pl-canvas-area .pl-chat-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: 46%;
  /* No hard max-height — the JS drag handler clamps to the real canvas
     height so the user can grow the chat all the way to the top if wanted. */
  max-height: none;
  min-height: 80px;
}
.pl-canvas-area .pl-chat-panel.minimized {
  height: 36px !important;
  min-height: 36px;
}
.pl-canvas-area .pl-chat-panel.minimized .pl-chat-messages,
.pl-canvas-area .pl-chat-panel.minimized .pl-chat-input-area {
  display: none;
}
.pl-chat-btn-min,
.pl-chat-btn-stop {
  background: none;
  border: 1px solid transparent;
  color: #5a6a8a;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}
.pl-chat-btn-min:hover { color: #7eb8e0; border-color: rgba(126,184,224,0.3); }
.pl-chat-btn-stop {
  color: #ef4444;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: none;
}
.pl-chat-btn-stop.visible { display: inline-block; }
.pl-chat-btn-stop:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.4); }

/* Markdown table styles */
.pl-chat-msg-content .md-table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.6em 0;
  font-size: 0.82rem;
}
.pl-chat-msg-content .md-table th,
.pl-chat-msg-content .md-table td {
  border: 1px solid #444;
  padding: 6px 12px;
  text-align: left;
}
.pl-chat-msg-content .md-table thead {
  background: #2a2a2a;
}
.pl-chat-msg-content .md-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}

/* Pop-out chat button */
.pl-chat-btn-popout {
  background: none;
  border: 1px solid transparent;
  color: #5a6a8a;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
}
.pl-chat-btn-popout:hover { color: #7eb8e0; border-color: rgba(126,184,224,0.3); }

/* ========================================================================
   Collapsible side panels (Map Controls / Map Versions)
   ======================================================================== */
.pl-panel {
  position: relative;
  transition: width 0.25s ease, min-width 0.25s ease, padding 0.25s ease;
}
.pl-panel-collapse {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: rgba(126,184,224,0.08);
  border: 1px solid rgba(126,184,224,0.25);
  border-radius: 4px;
  color: #7eb8e0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.15s, transform 0.2s;
}
.pl-panel-collapse:hover { background: rgba(126,184,224,0.2); }
.pl-panel-left .pl-panel-collapse { right: 6px; }
.pl-panel-right .pl-panel-collapse { left: 6px; right: auto; }

.pl-panel.collapsed {
  width: 32px !important;
  min-width: 32px !important;
  padding: 6px 4px;
  overflow: hidden;
}
.pl-panel.collapsed > *:not(.pl-panel-collapse):not(.pl-panel-resize) {
  display: none !important;
}
.pl-panel.collapsed .pl-panel-collapse { top: 6px; }

/* ========================================================================
   Post-it content area (FIX 3 — drag only from borders)
   ======================================================================== */
.pl-postit-content {
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  padding: 6px 8px;
  pointer-events: auto;
  cursor: text;
  overflow: auto;
  color: #c8d8ec;
  font-size: 0.78rem;
  line-height: 1.4;
  background: transparent;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 10px;
}
.pl-postit-content:focus {
  background: rgba(10,14,26,0.35);
  box-shadow: 0 0 0 1px rgba(167,139,250,0.25) inset;
}
.pl-postit-content:empty::before {
  content: 'Note...';
  color: #3a4a6a;
  pointer-events: none;
}