/* ---------- Noko overlay ---------- */
.noki, .noki-shadow, .noki-bubble {
  position: fixed;
  inset-block-start: 0;
  left: 0; /* physical on purpose: transforms are computed from clientX */
  pointer-events: none;
  will-change: transform;
}
.noki { z-index: 2147483001; }
.noki canvas { display: block; }

.noki-shadow {
  z-index: 2147483000;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--noki-ink) 42%, transparent), transparent);
  filter: blur(3px);
  transform-origin: center;
}

/* ---------- Inspector ---------- */
.noki-hover, .noki-select {
  position: fixed; left: 0; top: 0; z-index: 2147482990;
  pointer-events: none; border-radius: 10px; opacity: 0;
  transition: opacity 0.15s ease;
}
.noki-hover { outline: 1.5px dashed rgba(76, 201, 35, 0.95); background: rgba(142, 245, 74, 0.06); }
.noki-select {
  outline: 2px solid #4cc923;
  box-shadow: 0 0 0 5px rgba(142, 245, 74, 0.22);
  transition: opacity 0.15s ease, width 0.25s ease, height 0.25s ease;
}
.noki-select-label {
  position: absolute; top: -26px; left: 0;
  padding: 3px 9px; border-radius: 8px;
  background: #4cc923; color: #0a1f07;
  font: 700 11px/1.4 system-ui, -apple-system, sans-serif; white-space: nowrap;
}

/* ---------- Chat: one card — conversation on top, composer below ---------- */
.noki-chat {
  --ink: #0a1f07; --lime: #4cc923; --lime-hi: #8ef54a; --soft: #f0ffe0; --mute: #7d8a77;
  position: fixed; left: 0; top: 0; z-index: 2147483003;
  width: 300px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  max-height: min(400px, calc(100vh - 24px));
  background: #fff; border-radius: 22px;
  box-shadow: 0 16px 44px rgba(10, 31, 7, 0.2), 0 0 0 1px rgba(10, 31, 7, 0.07);
  color: var(--ink);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  opacity: 0; pointer-events: none; scale: 0.94;
  transition: opacity 0.22s ease, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.noki-chat.open { opacity: 1; pointer-events: auto; scale: 1; }
.noki-chat:has(.nc-input:focus) { box-shadow: 0 16px 44px rgba(10, 31, 7, 0.2), 0 0 0 1.5px var(--lime), 0 0 0 5px rgba(142, 245, 74, 0.22); }

/* Conversation: inside the card, above the composer — only when there is one. */
.nc-log {
  overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 10px 6px; scrollbar-width: none;
  border-bottom: 1px solid #eef1ec;
  mask-image: linear-gradient(transparent, #000 14px); /* older messages fade out at the top */
}
.nc-log::-webkit-scrollbar { display: none; }
.nc-log:empty { display: none; }
.nc-msg {
  max-width: 88%; padding: 7px 11px; border-radius: 16px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  animation: nc-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-msg.nc-from-noki { align-self: flex-start; background: #f2f5f0; border-end-start-radius: 6px; }
.nc-msg.nc-from-user { align-self: flex-end; background: var(--ink); color: #eef6ea; border-end-end-radius: 6px; }
@keyframes nc-dots { 0% { content: ""; } 25% { content: "·"; } 50% { content: "··"; } 75% { content: "···"; } }
@keyframes nc-in { from { opacity: 0; translate: 0 6px; } }

.nc-actions { display: flex; flex-wrap: wrap; gap: 5px; animation: nc-in 0.3s ease; }
.nc-btn {
  border: 0; background: #fff; color: var(--ink); cursor: pointer;
  padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 650;
  box-shadow: inset 0 0 0 1px #dfe5da;
}
.nc-btn:hover { box-shadow: inset 0 0 0 1.5px var(--lime); }
.nc-btn.primary { background: var(--lime); box-shadow: none; }
.nc-btn.primary:hover { background: var(--lime-hi); }
/* "try again · undo" sit quietly on the change's own line. */
.nc-done .nc-actions { display: inline-flex; gap: 0; margin-inline-start: 4px; }
.nc-link {
  border: 0; background: none; cursor: pointer; font: inherit; color: #5b6a55; font-weight: 600;
  padding: 0 6px; text-decoration: underline; text-decoration-color: rgba(91, 106, 85, 0.35); text-underline-offset: 2px;
}
.nc-link + .nc-link { border-inline-start: 1px solid rgba(91, 106, 85, 0.3); }
.nc-link:hover { color: var(--ink); text-decoration-color: currentColor; }

/* The composer: context on top, text + send below — one card. */
.nc-form { flex: none; display: flex; flex-direction: column; padding: 5px; }

/* What Noko is attached to: an icon, not a label (hover for details, click to detach). */
.nc-ctx {
  flex: none; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: #a3ad9e; cursor: default;
}
.nc-ctx svg { grid-area: 1 / 1; transition: opacity 0.2s ease, scale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nc-ctx .nc-ctx-el { opacity: 0; scale: 0.6; }
.nc-ctx.on { color: #2c9414; cursor: pointer; }
.nc-ctx.on .nc-ctx-el { opacity: 1; scale: 1; filter: drop-shadow(0 0 4px rgba(142, 245, 74, 0.8)); }
.nc-ctx.on .nc-ctx-page { opacity: 0; scale: 0.6; }
.nc-ctx.on:hover { background: var(--soft); }

.nc-row { display: flex; align-items: flex-end; gap: 6px; }
.nc-input {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: none;
  padding: 7px 6px; margin: 0; font: inherit; font-size: 14px; line-height: 20px; color: var(--ink);
  height: 34px; max-height: 120px; overflow-y: auto; scrollbar-width: thin;
}
.nc-input::placeholder { color: var(--mute); }
.nc-send {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: var(--lime); color: var(--ink);
  transition: background 0.15s ease, color 0.15s ease, scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nc-send:hover { background: var(--lime-hi); }
.nc-send:active { scale: 0.92; }
.nc-send:disabled { background: #eef1ec; color: #b2bbad; cursor: default; scale: 1; }

body.noki-picking .site { cursor: default; }

/* ---------- Inline text editing ---------- */
.noki-inline-bar {
  position: fixed; left: 0; top: 0; z-index: 2147483004;
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 14px;
  background: #0a1f07; color: #cfe8c4;
  box-shadow: 0 10px 30px rgba(10, 31, 7, 0.3);
  font: 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: nc-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.noki-inline-bar[hidden] { display: none; }
.noki-inline-bar button {
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: 7px 12px; border-radius: 9px; white-space: nowrap;
}
.nib-save { background: #4cc923; color: #0a1f07; }
.nib-save:hover { background: #8ef54a; }
.nib-cancel { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nib-hint { padding-inline: 6px 4px; font-size: 11px; color: #8fa987; white-space: nowrap; }
@media (max-width: 640px) { .nib-hint { display: none; } }
.noki-chat.open.editing-inline { opacity: 0; pointer-events: none; scale: 0.96; }
.nib-hint { direction: ltr; unicode-bidi: plaintext; }

/* ---------- Noko stepping away ---------- */
.noki, .noki-shadow { transition: opacity 0.35s ease, filter 0.35s ease; }
/* Scale the canvas, not .noki: .noki is positioned by a translate in `transform`, and the
   separate `scale` property is applied around its untranslated box (the page's top-left),
   so scaling .noki itself made Noko slide toward the corner while shrinking. */
.noki canvas { transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.noki.noki-away { opacity: 0; filter: blur(6px); }
.noki.noki-away canvas { scale: 0.3; }
.noki-shadow.noki-away, .noki-bubble.noki-away { opacity: 0 !important; }
.noki-toast {
  position: fixed; left: 0; top: 0; z-index: 2147483004;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 12px; border-radius: 12px;
  background: #0a1f07; color: #b9f38f;
  box-shadow: 0 10px 30px rgba(10, 31, 7, 0.3);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: nc-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.noki-toast[hidden] { display: none; }
.nt-undo {
  border: 0; cursor: pointer; font: inherit; padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.12); color: #fff;
}
.nt-undo:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Noko's speech bubble ---------- */
.noki-bubble {
  --bg: #fff;
  z-index: 2147483005;
  display: flex; align-items: center; gap: 8px;
  width: max-content; max-width: 240px;
  padding: 8px 12px; border-radius: 14px;
  background: var(--bg); color: #0a1f07;
  font: 600 13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: start;
  box-shadow: 0 6px 20px rgba(10, 31, 7, 0.16), 0 0 0 1px rgba(10, 31, 7, 0.06);
  opacity: 0; scale: 0.85;
  transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.noki-bubble.show { opacity: 1; scale: 1; }
.noki-bubble[data-side="above"] { transform-origin: var(--tx) 100%; }
.noki-bubble[data-side="below"] { transform-origin: var(--tx) 0; }
.noki-bubble[data-side="right"] { transform-origin: 0 var(--ty); }
.noki-bubble[data-side="left"] { transform-origin: 100% var(--ty); }
.nb-text { min-width: 0; }

/* Working: three dots bouncing in turn. */
.nb-dots { display: none; gap: 3px; align-items: center; height: 1em; }
.noki-bubble.working .nb-dots { display: inline-flex; }
.nb-dots i { width: 5px; height: 5px; border-radius: 50%; background: #4cc923; animation: nb-dot 1.1s ease-in-out infinite; }
.nb-dots i:nth-child(2) { animation-delay: 0.15s; }
.nb-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nb-dot {
  0%, 60%, 100% { translate: 0 0; opacity: 0.45; }
  30% { translate: 0 -4px; opacity: 1; }
}

/* Tail: anchored on the edge facing Noko, drawn pointing down and rotated per side.
   Speaking → a speech tail; working → thought-bubble circles. */
.nb-tail {
  position: absolute; width: 18px; height: 18px; pointer-events: none;
  transform-origin: 50% 0; translate: -50% 0;
}
.noki-bubble[data-side="above"] .nb-tail { left: var(--tx); top: calc(100% - 1px); }
.noki-bubble[data-side="below"] .nb-tail { left: var(--tx); top: 1px; rotate: 180deg; }
.noki-bubble[data-side="left"] .nb-tail { left: calc(100% - 1px); top: var(--ty); rotate: -90deg; }
.noki-bubble[data-side="right"] .nb-tail { left: 1px; top: var(--ty); rotate: 90deg; }
.nb-tail svg { display: block; overflow: visible; filter: drop-shadow(0 2px 2px rgba(10, 31, 7, 0.1)); }
.nb-tail path { fill: var(--bg); stroke: rgba(10, 31, 7, 0.06); stroke-width: 1; }
.nb-tail i {
  position: absolute; left: 50%; border-radius: 50%; background: var(--bg); display: none;
  box-shadow: 0 2px 6px rgba(10, 31, 7, 0.14), 0 0 0 1px rgba(10, 31, 7, 0.06);
}
.nb-tail i:nth-of-type(1) { width: 9px; height: 9px; top: 4px; margin-left: -4.5px; }
.nb-tail i:nth-of-type(2) { width: 5px; height: 5px; top: 16px; margin-left: -2.5px; }
.noki-bubble.working .nb-tail svg { display: none; }
.noki-bubble.working .nb-tail i { display: block; animation: nb-float 2.2s ease-in-out infinite; }
.noki-bubble.working .nb-tail i:nth-of-type(2) { animation-delay: 0.3s; }
@keyframes nb-float { 50% { translate: 0 1.5px; } }

/* ---------- File card: an image file the user can view, download and replace ---------- */
.nc-file {
  position: relative; align-self: stretch;
  display: grid; grid-template-columns: 56px 1fr; gap: 6px 10px; align-items: center;
  padding: 8px; border-radius: 14px; background: #f6f8f4;
  animation: nc-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-file-thumb {
  width: 56px; height: 56px; border-radius: 10px; overflow: hidden; display: grid; place-items: center;
  background: repeating-conic-gradient(#a9b1a4 0% 25%, #c3c9bf 0% 50%) 50% / 12px 12px; /* shows transparency */
  box-shadow: inset 0 0 0 1px rgba(10, 31, 7, 0.08);
}
.nc-file-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nc-file-meta { min-width: 0; display: grid; gap: 1px; }
.nc-file-meta b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; unicode-bidi: plaintext; }
.nc-file-meta span { font-size: 11px; color: var(--mute); text-align: start; unicode-bidi: plaintext; }
.nc-file-btns { grid-column: 1 / -1; display: flex; gap: 5px; flex-wrap: wrap; }
.nc-file-btns .nc-btn { text-decoration: none; padding: 5px 10px; }
.nc-file-btns .nc-btn.primary { margin-inline-start: auto; }
.nc-file-drop {
  position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center;
  background: rgba(240, 255, 224, 0.94); outline: 2px dashed var(--lime); outline-offset: -4px;
  font-weight: 700; color: #2c7a14; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.nc-file.drag .nc-file-drop { opacity: 1; }

/* ---------- Remembered conversations ---------- */
.nc-earlier {
  align-self: center; display: flex; align-items: center; gap: 2px;
  padding: 2px 4px 2px 10px; border-radius: 999px;
  color: var(--mute); font-size: 11px;
}
.noki-chat[dir="rtl"] .nc-earlier { padding: 2px 10px 2px 4px; }
.nc-forget {
  border: 0; background: none; cursor: pointer; width: 18px; height: 18px; border-radius: 50%;
  font-size: 9px; line-height: 18px; color: var(--mute);
}
.nc-forget:hover { background: rgba(10, 31, 7, 0.08); color: var(--ink); }
.nc-more {
  align-self: center; border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; background: var(--soft); color: #2c7a14;
}
.nc-more:hover { background: #e2fbc8; }
.nc-done {
  align-self: flex-start; max-width: 100%; padding: 4px 10px; border-radius: 12px;
  background: var(--soft); color: #2c7a14; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  animation: nc-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-done.undone { background: #f2f5f0; color: var(--mute); }
.nc-old { opacity: 0.72; animation: none; }
.nc-old:hover { opacity: 1; }

/* Hovering an element Noko already talked about: a small speech badge. */
.noki-hover.has-thread::after {
  content: ""; position: absolute; inset-block-start: -9px; inset-inline-end: -9px;
  width: 18px; height: 18px; border-radius: 50% 50% 50% 4px;
  background: #4cc923 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cg fill='%230a1f07'%3E%3Ccircle cx='5.5' cy='9' r='1.4'/%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3Ccircle cx='12.5' cy='9' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 2px 6px rgba(10, 31, 7, 0.25);
}

/* ---------- Attachments: paperclip, tray, drop ---------- */
.nc-clip {
  flex: none; width: 30px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: none; color: #8a9485; cursor: pointer;
}
.nc-clip:hover { background: #f1f3ef; color: var(--ink); }
.nc-tray { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 2px; }
.nc-tray:empty { display: none; }
.nc-chip-file {
  position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: #eef1ec; box-shadow: inset 0 0 0 1px rgba(10, 31, 7, 0.08);
  animation: nc-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nc-chip-file img, .nc-chip-file video { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-chip-file.loading img, .nc-chip-file.loading video { opacity: 0.45; filter: saturate(0.4); }
.nc-chip-file.loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(76, 201, 35, 0.3); border-top-color: #4cc923; animation: nc-spin 0.8s linear infinite;
}
@keyframes nc-spin { to { rotate: 360deg; } }
.nc-chip-file button {
  position: absolute; inset-block-start: 3px; inset-inline-end: 3px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(10, 31, 7, 0.7); color: #fff; font-size: 9px; line-height: 18px; cursor: pointer;
}
.noki-chat.drop { box-shadow: 0 16px 44px rgba(10, 31, 7, 0.2), 0 0 0 2px var(--lime), 0 0 0 7px rgba(142, 245, 74, 0.3); }
.noki-chat.drop .nc-form { background: var(--soft); border-radius: 0 0 22px 22px; }
.nc-msg-files { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.nc-msg-files img, .nc-msg-files video { width: 64px; height: 64px; object-fit: cover; border-radius: 9px; display: block; }

/* Links in messages */
.nc-a { color: #1f7a0c; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; unicode-bidi: isolate; }
.nc-a:hover { color: var(--ink); }
.nc-from-user .nc-a { color: #b9f38f; }

/* ---------- Docked page chat: an input bar at the bottom centre ---------- */
.noki-chat.docked {
  width: min(560px, calc(100vw - 120px));
  /* Glides along with the side panel (same timing as its slide). */
  transition: opacity 0.22s ease, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease,
              transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 14px 40px rgba(10, 31, 7, 0.22), 0 0 0 1px rgba(10, 31, 7, 0.08);
}
.noki-chat.docked .nc-input { font-size: 15px; }
.noki-chat.docked .nc-form { padding: 7px; }
/* Folded: just the input. In use: the page conversation shows above it. */
.noki-chat.docked:not(.active) .nc-log { display: none; }
.noki-chat.docked:not(.active) { box-shadow: 0 10px 30px rgba(10, 31, 7, 0.18), 0 0 0 1px rgba(10, 31, 7, 0.08); }

/* ---------- QA refinements ---------- */
/* 1. Always: the user on the right, Noko on the left — in Hebrew and English alike. */
.nc-msg.nc-from-user { align-self: flex-end; border-radius: 16px; border-bottom-right-radius: 6px; }
.nc-msg.nc-from-noki { align-self: flex-start; border-radius: 16px; border-bottom-left-radius: 6px; }
.nc-done, .nc-file, .nc-actions { align-self: flex-start; }
.noki-chat[dir="rtl"] .nc-msg.nc-from-user { align-self: flex-start; }
.noki-chat[dir="rtl"] .nc-msg.nc-from-noki,
.noki-chat[dir="rtl"] .nc-done { align-self: flex-end; }
/* (in RTL, flex-start is the right side — so the two swap above) */

/* 5. The element tag on the top edge (its ✕ detaches the chat from the element). */
.nc-tag {
  position: absolute; top: -11px; left: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 3px; height: 22px; box-sizing: border-box;
  padding: 0 4px 0 9px; border-radius: 999px;
  background: var(--ink); color: #c8f5a8; font: 700 11px/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 4px 10px rgba(10, 31, 7, 0.18);
}
.noki-chat[dir="rtl"] .nc-tag { left: auto; right: 16px; padding: 0 9px 0 4px; }
.nc-tag[hidden] { display: none; }
.nc-tag-x { width: 16px; height: 16px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.6; cursor: pointer; }
.nc-tag-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }
.noki-chat:has(.nc-tag:not([hidden])) .nc-log { padding-top: 20px; }

/* 3. Busy: the composer shows Noko is working and won't take another request. */
.noki-chat.busy .nc-form { position: relative; }
.noki-chat.busy .nc-input { cursor: progress; }
.noki-chat.busy .nc-input::placeholder {
  color: transparent;
  background: linear-gradient(90deg, #8a9485 0%, #8a9485 35%, #2c9414 50%, #8a9485 65%, #8a9485 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: nc-shimmer 1.6s linear infinite;
}
[dir="rtl"] .noki-chat.busy .nc-input::placeholder, .noki-chat[dir="rtl"].busy .nc-input::placeholder { animation-direction: reverse; }
@keyframes nc-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.noki-chat.busy .nc-send { background: var(--ink); color: var(--lime-hi); cursor: progress; }
.noki-chat.busy .nc-send svg { display: none; }
.noki-chat.busy .nc-send::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(142, 245, 74, 0.3); border-top-color: var(--lime-hi); animation: nc-spin 0.8s linear infinite;
}
.noki-chat.busy .nc-clip { opacity: 0.4; pointer-events: none; }

/* 9. An outline whose top is cut off at the preview edge keeps its label inside. */
.noki-select.clip-top .noki-select-label { top: 4px; left: 4px; }
.nc-input { overflow-y: hidden; }

.noki-chat.docked.squeezed { opacity: 0; pointer-events: none; scale: 0.96; }

/* What exactly changed, under the change line */
.nc-done:has(.nc-changes) { border-radius: 14px; padding: 7px 11px 8px; }
.nc-changes { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-weight: 500; color: #33502a; }
.nc-changes li { position: relative; padding-inline-start: 13px; line-height: 1.4; }
.nc-changes li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: #4cc923; }
.nc-changes li[hidden] { display: none; }
.nc-changes-more { justify-self: start; border: 0; background: none; padding: 0 13px; font: inherit; font-weight: 600; color: #2c7a14; text-decoration: underline; cursor: pointer; }

/* Only the latest round shows in the chat; the rest is in the Chats tab. */
.nc-gone { display: none !important; }
.nc-full {
  align-self: center; border: 0; background: none; cursor: pointer; padding: 2px 8px; border-radius: 999px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: #2c7a14;
}
.nc-full:hover { background: var(--soft); }

/* Stop: while Noko works, the send button becomes a square stop button with a spinning ring. */
.noki-chat.busy .nc-send.stop { position: relative; cursor: pointer; background: var(--ink); }
.noki-chat.busy .nc-send.stop::after { position: absolute; inset: 3px; width: auto; height: auto; }
.noki-chat.busy .nc-send.stop::before {
  content: ""; width: 10px; height: 10px; border-radius: 2.5px; background: var(--lime-hi);
}
.noki-chat.busy .nc-send.stop:hover { background: #163a10; }
.noki-chat.busy .nc-send.stop:hover::before { background: #fff; }

/* Outlines near the top of the preview: label and conversation badge sit inside. */
.noki-hover.clip-top.has-thread::after { inset-block-start: 4px; inset-inline-end: 4px; }

/* The open page chat: a small ✕ on its top-left corner folds it back into the bar. */
.nc-fold {
  position: absolute; top: 8px; left: 8px; z-index: 3; display: none;
  width: 22px; height: 22px; padding: 0; place-items: center;
  border: 0; border-radius: 50%; background: #f2f4f0; color: #7d8a77; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.nc-fold:hover { background: var(--ink); color: #fff; }
.noki-chat.docked.active:has(.nc-log > :not(.nc-full)) .nc-fold { display: grid; }