nowaikit-utils 1.1.0

package/content/styles.css

@@ -0,0 +1,1609 @@
+/* NowAIKit Utils — Content Script Styles */
+
+/* ─── Update Set Banner ──────────────────────────────────────────────────── */
+
+#nowaikit-updateset-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999999;
+  background: linear-gradient(135deg, #0F4C81 0%, #00D4AA 100%);
+  color: #fff;
+  padding: 4px 16px;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s;
+}
+
+#nowaikit-updateset-banner strong {
+  font-weight: 600;
+}
+
+/* ─── Technical Names ────────────────────────────────────────────────────── */
+
+.nowaikit-techname {
+  display: inline-block;
+  margin-left: 6px;
+  padding: 1px 6px;
+  background: rgba(0, 212, 170, 0.12);
+  color: #00D4AA;
+  font-size: 10px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  border-radius: 3px;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: background 0.2s;
+}
+
+.nowaikit-techname:hover {
+  background: rgba(0, 212, 170, 0.25);
+}
+
+/* 3D: Dotted underline for badges with tooltip metadata */
+.nowaikit-has-tooltip {
+  border-bottom: 1px dotted rgba(0, 212, 170, 0.6);
+  cursor: help;
+}
+
+/* ─── Copy Button ────────────────────────────────────────────────────────── */
+
+.nowaikit-copy-btn {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: rgba(0, 212, 170, 0.1);
+  color: #00D4AA;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 20px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 10;
+}
+
+*:hover > .nowaikit-copy-btn {
+  opacity: 1;
+}
+
+.nowaikit-copy-btn:hover {
+  background: rgba(0, 212, 170, 0.25);
+}
+
+/* ─── Info Overlay ───────────────────────────────────────────────────────── */
+
+#nowaikit-info-overlay {
+  position: fixed;
+  bottom: 12px;
+  right: 12px;
+  z-index: 999998;
+  background: #111828;
+  border: 1px solid #2a3548;
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  color: #c8d0dc;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  min-width: 180px;
+  opacity: 0.85;
+  transition: opacity 0.2s;
+}
+
+#nowaikit-info-overlay:hover {
+  opacity: 1;
+}
+
+.nowaikit-info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3px 0;
+}
+
+.nowaikit-info-label {
+  color: #6b7a90;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.nowaikit-info-value {
+  color: #e0e5ec;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  font-size: 11px;
+}
+
+.nowaikit-clickable {
+  cursor: pointer;
+  color: #00D4AA;
+}
+
+.nowaikit-clickable:hover {
+  text-decoration: underline;
+}
+
+/* 3C: Node value styling */
+.nowaikit-node-value {
+  color: #f0a030;
+  font-weight: 500;
+}
+
+/* ─── Quick Navigation ───────────────────────────────────────────────────── */
+
+#nowaikit-quicknav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999999;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  padding-top: 20vh;
+}
+
+#nowaikit-quicknav-input {
+  width: 500px;
+  max-width: 90vw;
+  height: 48px;
+  background: #111828;
+  border: 2px solid #00D4AA;
+  border-radius: 12px;
+  color: #f0f2f5;
+  font-size: 16px;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  padding: 0 20px;
+  outline: none;
+  box-shadow: 0 8px 32px rgba(0, 212, 170, 0.15);
+}
+
+#nowaikit-quicknav-input::placeholder {
+  color: #4a5670;
+}
+
+/* ─── Toast ──────────────────────────────────────────────────────────────── */
+
+.nowaikit-toast {
+  position: fixed;
+  top: 40px;
+  right: 20px;
+  z-index: 99999999;
+  background: #111828;
+  color: #f0f2f5;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  transform: translateX(120%);
+  transition: transform 0.3s ease;
+  border-left: 3px solid #00D4AA;
+}
+
+.nowaikit-toast-warn {
+  border-left-color: #f0a030;
+}
+
+.nowaikit-toast-show {
+  transform: translateX(0);
+}
+
+/* ─── 3D. Field Type Tooltips ────────────────────────────────────────────── */
+
+.nowaikit-field-tooltip {
+  position: absolute;
+  z-index: 99999999;
+  background: #1a2234;
+  border: 1px solid #2a3548;
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  color: #c8d0dc;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  min-width: 180px;
+  max-width: 320px;
+  pointer-events: none;
+  animation: nowaikit-tooltip-in 0.15s ease;
+}
+
+@keyframes nowaikit-tooltip-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.nowaikit-tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 0;
+  gap: 12px;
+}
+
+.nowaikit-tooltip-key {
+  color: #6b7a90;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.nowaikit-tooltip-val {
+  color: #e0e5ec;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  font-size: 11px;
+  text-align: right;
+  word-break: break-word;
+}
+
+/* ─── Node Switcher Modal ───────────────────────────────────────────────── */
+
+.nowaikit-node-switcher {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999999;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 15vh;
+  animation: nowaikit-fade-in 0.15s ease;
+}
+
+@keyframes nowaikit-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.nowaikit-node-switcher-panel {
+  width: 420px;
+  max-width: 92vw;
+  background: #111828;
+  border: 1px solid #2a3548;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  animation: nowaikit-slide-down 0.2s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+@keyframes nowaikit-slide-down {
+  from { opacity: 0; transform: translateY(-12px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.nowaikit-node-switcher-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: linear-gradient(135deg, #0F4C81 0%, rgba(0, 212, 170, 0.15) 100%);
+  border-bottom: 1px solid #2a3548;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.nowaikit-node-switcher-close {
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.6);
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.nowaikit-node-switcher-close:hover {
+  color: #fff;
+}
+
+.nowaikit-node-switcher-body {
+  max-height: 340px;
+  overflow-y: auto;
+  padding: 6px;
+}
+
+.nowaikit-node-switcher-body::-webkit-scrollbar {
+  width: 5px;
+}
+
+.nowaikit-node-switcher-body::-webkit-scrollbar-thumb {
+  background: #2a3548;
+  border-radius: 3px;
+}
+
+.nowaikit-node-switcher-loading,
+.nowaikit-node-switcher-empty {
+  padding: 28px 12px;
+  text-align: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: #6b7a90;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.nowaikit-node-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(0, 212, 170, 0.2);
+  border-top-color: #00D4AA;
+  border-radius: 50%;
+  animation: nowaikit-spin 0.7s linear infinite;
+}
+
+@keyframes nowaikit-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Node Item (selectable radio row) ───────────────────────────────────── */
+
+.nowaikit-node-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  margin: 2px 0;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+  user-select: none;
+}
+
+.nowaikit-node-item:hover {
+  background: rgba(0, 212, 170, 0.06);
+}
+
+.nowaikit-node-item.nowaikit-node-selected {
+  background: rgba(0, 212, 170, 0.1);
+  border-color: #00D4AA;
+}
+
+.nowaikit-node-item.nowaikit-node-current {
+  background: rgba(0, 212, 170, 0.04);
+  border-color: rgba(0, 212, 170, 0.15);
+}
+
+/* Radio indicator */
+.nowaikit-node-radio {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #3a4a60;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s;
+}
+
+.nowaikit-node-radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.nowaikit-node-item.nowaikit-node-current .nowaikit-node-radio {
+  border-color: #00D4AA;
+}
+
+.nowaikit-node-item.nowaikit-node-current .nowaikit-node-radio-dot {
+  background: #00D4AA;
+}
+
+.nowaikit-node-item.nowaikit-node-selected .nowaikit-node-radio {
+  border-color: #00D4AA;
+}
+
+.nowaikit-node-item.nowaikit-node-selected .nowaikit-node-radio-dot {
+  background: #00D4AA;
+}
+
+/* Node details */
+.nowaikit-node-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.nowaikit-node-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: #e0e5ec;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.nowaikit-node-full-id {
+  font-size: 11px;
+  color: #5a6a80;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+}
+
+/* Badges */
+.nowaikit-node-badge-active {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: rgba(0, 212, 170, 0.15);
+  color: #00D4AA;
+  flex-shrink: 0;
+}
+
+.nowaikit-node-badge-available {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: rgba(100, 120, 150, 0.1);
+  color: #6b7a90;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+.nowaikit-node-item.nowaikit-node-selected .nowaikit-node-badge-available {
+  background: rgba(0, 212, 170, 0.15);
+  color: #00D4AA;
+}
+
+/* ── Footer with Switch button ──────────────────────────────────────────── */
+
+.nowaikit-node-switcher-footer {
+  padding: 12px 14px;
+  border-top: 1px solid #2a3548;
+  text-align: center;
+}
+
+.nowaikit-node-switch-btn {
+  width: 100%;
+  padding: 10px 16px;
+  background: #2a3548;
+  border: none;
+  border-radius: 8px;
+  color: #6b7a90;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: not-allowed;
+  transition: background 0.2s, color 0.2s, transform 0.1s;
+}
+
+.nowaikit-node-switch-btn:not(:disabled) {
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  color: #fff;
+  cursor: pointer;
+}
+
+.nowaikit-node-switch-btn:not(:disabled):hover {
+  opacity: 0.9;
+}
+
+.nowaikit-node-switch-btn:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+.nowaikit-node-switch-btn-loading {
+  opacity: 0.7 !important;
+  cursor: wait !important;
+}
+
+.nowaikit-node-footer-hint {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 11px;
+  color: #4a5568;
+  margin-top: 8px;
+}
+
+/* Node switch trigger in info overlay */
+.nowaikit-node-switch-trigger {
+  cursor: pointer !important;
+}
+
+.nowaikit-node-switch-trigger:hover {
+  text-decoration: underline;
+  color: #00D4AA !important;
+}
+
+/* ─── Node Switcher Light Theme ─────────────────────────────────────────── */
+
+body.nowaikit-light .nowaikit-node-switcher {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+body.nowaikit-light .nowaikit-node-switcher-panel {
+  background: #ffffff;
+  border-color: #d4dae3;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+}
+
+body.nowaikit-light .nowaikit-node-switcher-header {
+  background: linear-gradient(135deg, #0F4C81 0%, rgba(0, 212, 170, 0.15) 100%);
+  border-bottom-color: #d4dae3;
+}
+
+body.nowaikit-light .nowaikit-node-item:hover {
+  background: rgba(10, 125, 100, 0.05);
+}
+
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-selected {
+  background: rgba(10, 125, 100, 0.08);
+  border-color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-current {
+  background: rgba(10, 125, 100, 0.04);
+  border-color: rgba(10, 125, 100, 0.15);
+}
+
+body.nowaikit-light .nowaikit-node-radio {
+  border-color: #b0b8c8;
+}
+
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-current .nowaikit-node-radio,
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-selected .nowaikit-node-radio {
+  border-color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-current .nowaikit-node-radio-dot,
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-selected .nowaikit-node-radio-dot {
+  background: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-name {
+  color: #2e3440;
+}
+
+body.nowaikit-light .nowaikit-node-full-id {
+  color: #7a849a;
+}
+
+body.nowaikit-light .nowaikit-node-badge-active {
+  background: rgba(10, 125, 100, 0.1);
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-badge-available {
+  background: rgba(100, 120, 150, 0.08);
+  color: #7a849a;
+}
+
+body.nowaikit-light .nowaikit-node-item.nowaikit-node-selected .nowaikit-node-badge-available {
+  background: rgba(10, 125, 100, 0.1);
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-switcher-footer {
+  border-top-color: #d4dae3;
+}
+
+body.nowaikit-light .nowaikit-node-switch-btn {
+  background: #e8ecf0;
+  color: #7a849a;
+}
+
+body.nowaikit-light .nowaikit-node-switch-btn:not(:disabled) {
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  color: #fff;
+}
+
+body.nowaikit-light .nowaikit-node-footer-hint {
+  color: #9aa0b0;
+}
+
+/* ─── 3B. Script Syntax Highlighting ─────────────────────────────────────── */
+
+.nowaikit-script-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 5;
+}
+
+.nowaikit-textarea-overlay {
+  overflow: auto;
+}
+
+.nowaikit-script-pre {
+  margin: 0;
+  padding: 4px;
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
+  font-size: inherit;
+  line-height: inherit;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: transparent;
+  background: transparent;
+}
+
+/* JavaScript keywords: purple/violet */
+.nowaikit-keyword {
+  color: #c678dd;
+  font-weight: 500;
+}
+
+/* ServiceNow-specific APIs: teal/accent — distinct from regular keywords */
+.nowaikit-sn-api {
+  color: #00D4AA;
+  font-weight: 600;
+}
+
+/* String literals: warm green */
+.nowaikit-string {
+  color: #98c379;
+}
+
+/* Comments: muted gray */
+.nowaikit-comment {
+  color: #5c6370;
+  font-style: italic;
+}
+
+/* Number literals: orange */
+.nowaikit-number {
+  color: #d19a66;
+}
+
+/* ─── 3E. Theme-Aware Overrides ──────────────────────────────────────────── */
+
+/*
+ * Light theme — applied when body has .nowaikit-light
+ * Adjusts all injected UI for bright ServiceNow backgrounds (Polaris light).
+ */
+
+/* Info Overlay — light variant */
+body.nowaikit-light #nowaikit-info-overlay {
+  background: #ffffff;
+  border-color: #d4dae3;
+  color: #3b4252;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+body.nowaikit-light .nowaikit-info-label {
+  color: #7a849a;
+}
+
+body.nowaikit-light .nowaikit-info-value {
+  color: #2e3440;
+}
+
+body.nowaikit-light .nowaikit-clickable {
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-node-value {
+  color: #c06000;
+}
+
+/* Quick Nav — light variant */
+body.nowaikit-light #nowaikit-quicknav {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+body.nowaikit-light #nowaikit-quicknav-input {
+  background: #ffffff;
+  border-color: #0a7d64;
+  color: #2e3440;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+}
+
+body.nowaikit-light #nowaikit-quicknav-input::placeholder {
+  color: #9aa0b0;
+}
+
+/* Toast — light variant */
+body.nowaikit-light .nowaikit-toast {
+  background: #ffffff;
+  color: #2e3440;
+  border-left-color: #0a7d64;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+body.nowaikit-light .nowaikit-toast-warn {
+  border-left-color: #c06000;
+}
+
+/* Technical names — light variant */
+body.nowaikit-light .nowaikit-techname {
+  background: rgba(10, 125, 100, 0.1);
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-techname:hover {
+  background: rgba(10, 125, 100, 0.2);
+}
+
+body.nowaikit-light .nowaikit-has-tooltip {
+  border-bottom-color: rgba(10, 125, 100, 0.5);
+}
+
+/* Copy button — light variant */
+body.nowaikit-light .nowaikit-copy-btn {
+  background: rgba(10, 125, 100, 0.08);
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-copy-btn:hover {
+  background: rgba(10, 125, 100, 0.18);
+}
+
+/* Field tooltip — light variant */
+body.nowaikit-light .nowaikit-field-tooltip {
+  background: #ffffff;
+  border-color: #d4dae3;
+  color: #3b4252;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+body.nowaikit-light .nowaikit-tooltip-key {
+  color: #7a849a;
+}
+
+body.nowaikit-light .nowaikit-tooltip-val {
+  color: #2e3440;
+}
+
+/* Script highlighting — light variant */
+body.nowaikit-light .nowaikit-keyword {
+  color: #a626a4;
+}
+
+body.nowaikit-light .nowaikit-sn-api {
+  color: #0a7d64;
+}
+
+body.nowaikit-light .nowaikit-string {
+  color: #50a14f;
+}
+
+body.nowaikit-light .nowaikit-comment {
+  color: #a0a1a7;
+}
+
+body.nowaikit-light .nowaikit-number {
+  color: #986801;
+}
+
+/* Update Set banner — same in both themes (gradient stays consistent) */
+
+/*
+ * Dark theme — applied when body has .nowaikit-dark
+ * This is the default styling already defined above.
+ * Explicit .nowaikit-dark selectors are included for specificity
+ * in case of conflicts with ServiceNow's own dark mode styles.
+ */
+
+body.nowaikit-dark #nowaikit-info-overlay {
+  background: #111828;
+  border-color: #2a3548;
+  color: #c8d0dc;
+}
+
+body.nowaikit-dark .nowaikit-field-tooltip {
+  background: #1a2234;
+  border-color: #2a3548;
+  color: #c8d0dc;
+}
+
+body.nowaikit-dark .nowaikit-toast {
+  background: #111828;
+  color: #f0f2f5;
+}
+
+body.nowaikit-dark #nowaikit-quicknav-input {
+  background: #111828;
+  color: #f0f2f5;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   AI SIDEBAR
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Hide info overlay when sidebar is open — prevents blocking chat */
+.nowaikit-ai-sidebar.open ~ #nowaikit-info-overlay,
+body:has(.nowaikit-ai-sidebar.open) #nowaikit-info-overlay {
+  opacity: 0 !important;
+  pointer-events: none !important;
+  transition: opacity 0.2s;
+}
+
+/* Toggle button (floating) */
+.nowaikit-ai-toggle {
+  position: fixed;
+  bottom: 80px;
+  right: 16px;
+  z-index: 999996;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00D4AA 0%, #0F4C81 100%);
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.nowaikit-ai-toggle:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 20px rgba(0, 212, 170, 0.4);
+}
+
+.nowaikit-ai-toggle.active {
+  background: #1e2a3e;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Sidebar panel */
+.nowaikit-ai-sidebar {
+  position: fixed;
+  top: 0;
+  right: -480px;
+  width: 480px;
+  height: 100vh;
+  z-index: 9999999;
+  background: #0B1020;
+  border-left: 1px solid #1e2a3e;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+  color: #e0e5ec;
+  transition: right 0.3s ease, width 0s, top 0s, height 0s;
+}
+
+.nowaikit-ai-sidebar.open {
+  right: 0;
+}
+
+/* Resize handle (left edge) */
+.nowaikit-ai-resize-handle {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 10;
+}
+.nowaikit-ai-resize-handle:hover,
+.nowaikit-ai-resize-handle.active {
+  background: rgba(0, 212, 170, 0.3);
+}
+
+/* Floating mode */
+.nowaikit-ai-sidebar.floating {
+  top: 60px;
+  right: 40px;
+  width: 520px;
+  height: 70vh;
+  border-radius: 12px;
+  border: 1px solid #1e2a3e;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+  resize: both;
+  overflow: hidden;
+  min-width: 360px;
+  min-height: 300px;
+}
+.nowaikit-ai-sidebar.floating .nowaikit-ai-header {
+  cursor: grab;
+  border-radius: 12px 12px 0 0;
+}
+.nowaikit-ai-sidebar.floating .nowaikit-ai-header:active {
+  cursor: grabbing;
+}
+.nowaikit-ai-sidebar.floating .nowaikit-ai-resize-handle {
+  display: none;
+}
+
+/* Header */
+.nowaikit-ai-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: linear-gradient(135deg, #0a2e5c 0%, #065f50 100%);
+  border-bottom: 1px solid #1e2a3e;
+  flex-shrink: 0;
+}
+
+.nowaikit-ai-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #00D4AA;
+}
+
+.nowaikit-ai-title {
+  font-weight: 800;
+  font-size: 16px;
+  letter-spacing: -0.02em;
+  -webkit-text-fill-color: initial;
+}
+
+.nk-ai-logo-now { background:linear-gradient(135deg,#fff 0%,#B8C4D4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
+.nk-ai-logo-ai { background:linear-gradient(90deg,#00F0C0,#00D4AA,#0F4C81,#00D4AA,#00F0C0);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:nowaikit-logo-shimmer 4s ease-in-out infinite; }
+.nk-ai-logo-kit { background:linear-gradient(135deg,#A0AEBE 0%,#6B7A8E 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
+.nk-ai-logo-suffix { font-weight:400;font-size:0.75em;-webkit-text-fill-color:rgba(255,255,255,0.5);letter-spacing:0.04em; }
+
+@keyframes nowaikit-logo-shimmer {
+  0%   { background-position: 0% 50%; }
+  50%  { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* Welcome screen branded text */
+.nowaikit-ai-welcome-title { font-weight:800;letter-spacing:-0.02em; }
+.nowaikit-ai-welcome-title .nk-ai-logo-suffix { font-size:0.65em; }
+
+.nowaikit-ai-header-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.nowaikit-ai-bridge-status {
+  display: flex;
+  align-items: center;
+  padding: 4px 16px 6px;
+  border-bottom: 1px solid #1e2a3e;
+  background: #0e1726;
+}
+
+.nowaikit-ai-btn-icon {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: #6b7a90;
+  cursor: pointer;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, color 0.2s;
+}
+
+.nowaikit-ai-btn-icon:hover {
+  background: #1e2a3e;
+  color: #e0e5ec;
+}
+
+/* Settings panel */
+.nowaikit-ai-settings-panel {
+  padding: 16px;
+  background: #111828;
+  border-bottom: 1px solid #1e2a3e;
+  flex-shrink: 0;
+}
+
+.nowaikit-ai-setting-group {
+  margin-bottom: 12px;
+}
+
+.nowaikit-ai-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: #6b7a90;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 4px;
+}
+
+.nowaikit-ai-select,
+.nowaikit-ai-input {
+  width: 100%;
+  padding: 8px 10px;
+  background: #0B1020;
+  border: 1px solid #1e2a3e;
+  border-radius: 6px;
+  color: #e0e5ec;
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.nowaikit-ai-select:focus,
+.nowaikit-ai-input:focus {
+  border-color: #00D4AA;
+}
+
+.nowaikit-ai-save-btn {
+  width: 100%;
+  padding: 8px;
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  border: none;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.nowaikit-ai-save-btn:hover {
+  opacity: 0.9;
+}
+
+/* Messages area */
+.nowaikit-ai-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.nowaikit-ai-messages::-webkit-scrollbar {
+  width: 6px;
+}
+
+.nowaikit-ai-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.nowaikit-ai-messages::-webkit-scrollbar-thumb {
+  background: #2a3548;
+  border-radius: 3px;
+}
+
+/* Welcome screen */
+.nowaikit-ai-welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 40px 20px;
+  flex: 1;
+}
+
+.nowaikit-ai-welcome-icon {
+  margin-bottom: 16px;
+}
+
+.nowaikit-ai-welcome-title {
+  font-size: 18px;
+  font-weight: 700;
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 8px;
+}
+
+.nowaikit-ai-welcome-sub {
+  font-size: 13px;
+  color: #6b7a90;
+  line-height: 1.5;
+  max-width: 280px;
+}
+
+.nowaikit-ai-welcome-hint {
+  font-size: 11px;
+  color: #4a5568;
+  margin-top: 16px;
+  padding: 8px 12px;
+  background: rgba(0, 212, 170, 0.05);
+  border-radius: 6px;
+  border: 1px solid rgba(0, 212, 170, 0.1);
+}
+
+/* Message bubbles */
+.nowaikit-ai-message {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.nowaikit-ai-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.nowaikit-ai-avatar-user {
+  background: #1e2a3e;
+  color: #e0e5ec;
+}
+
+.nowaikit-ai-avatar-ai {
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  color: #fff;
+}
+
+.nowaikit-ai-message-content {
+  flex: 1;
+  background: #111828;
+  border: 1px solid #1e2a3e;
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: #e0e5ec;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.nowaikit-ai-message-user .nowaikit-ai-message-content {
+  background: rgba(0, 212, 170, 0.08);
+  border-color: rgba(0, 212, 170, 0.15);
+}
+
+.nowaikit-ai-message-content code {
+  font-family: 'JetBrains Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  background: #0B1020;
+  padding: 1px 5px;
+  border-radius: 3px;
+  color: #00D4AA;
+}
+
+.nowaikit-ai-message-content pre {
+  background: #0B1020;
+  border: 1px solid #1e2a3e;
+  border-radius: 6px;
+  padding: 12px;
+  margin: 8px 0;
+  overflow-x: auto;
+  position: relative;
+}
+
+.nowaikit-ai-message-content pre code {
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #e0e5ec;
+}
+
+.nowaikit-ai-message-content strong {
+  color: #fff;
+}
+
+.nowaikit-ai-message-content h3, .nowaikit-ai-message-content h4 {
+  color: #fff;
+  margin: 8px 0 4px;
+}
+
+.nowaikit-ai-message-content ul, .nowaikit-ai-message-content ol {
+  padding-left: 20px;
+  margin: 4px 0;
+}
+
+.nowaikit-ai-message-content li {
+  margin-bottom: 2px;
+}
+
+.nowaikit-ai-error .nowaikit-ai-message-content {
+  border-color: #ff6b6b;
+  color: #ff8787;
+}
+
+/* Code action buttons */
+.nowaikit-ai-code-actions {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.nowaikit-ai-copy-code-btn,
+.nowaikit-ai-insert-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border: 1px solid #1e2a3e;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+}
+
+.nowaikit-ai-copy-code-btn {
+  background: transparent;
+  color: #6b7a90;
+}
+
+.nowaikit-ai-copy-code-btn:hover {
+  background: #1e2a3e;
+  color: #e0e5ec;
+}
+
+.nowaikit-ai-insert-btn {
+  background: rgba(0, 212, 170, 0.1);
+  color: #00D4AA;
+  border-color: rgba(0, 212, 170, 0.2);
+}
+
+.nowaikit-ai-insert-btn:hover {
+  background: rgba(0, 212, 170, 0.2);
+}
+
+/* Typing indicator */
+.nowaikit-ai-typing {
+  color: #6b7a90;
+  font-style: italic;
+}
+
+.nowaikit-ai-cursor {
+  animation: nowaikit-ai-blink 1s step-end infinite;
+  color: #00D4AA;
+}
+
+@keyframes nowaikit-ai-blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Quick actions bar */
+.nowaikit-ai-quick-actions {
+  display: flex;
+  gap: 6px;
+  padding: 10px 16px;
+  border-top: 1px solid #1e2a3e;
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+.nowaikit-ai-quick-actions::-webkit-scrollbar {
+  height: 0;
+}
+
+.nowaikit-ai-quick-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: #111828;
+  border: 1px solid #1e2a3e;
+  border-radius: 16px;
+  color: #6b7a90;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.nowaikit-ai-quick-btn:hover {
+  background: rgba(0, 212, 170, 0.08);
+  border-color: rgba(0, 212, 170, 0.2);
+  color: #00D4AA;
+}
+
+.nowaikit-ai-quick-icon {
+  font-size: 13px;
+}
+
+/* Input area */
+.nowaikit-ai-input-area {
+  padding: 12px 16px;
+  border-top: 1px solid #1e2a3e;
+  background: #111828;
+  flex-shrink: 0;
+}
+
+.nowaikit-ai-input-wrapper {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  background: #0B1020;
+  border: 1px solid #1e2a3e;
+  border-radius: 10px;
+  padding: 8px 12px;
+  transition: border-color 0.2s;
+}
+
+.nowaikit-ai-input-wrapper:focus-within {
+  border-color: #00D4AA;
+}
+
+.nowaikit-ai-chat-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #e0e5ec;
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.4;
+  resize: none;
+  outline: none;
+  max-height: 120px;
+}
+
+.nowaikit-ai-chat-input::placeholder {
+  color: #4a5568;
+}
+
+.nowaikit-ai-send-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: linear-gradient(135deg, #00D4AA, #0F4C81);
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: opacity 0.2s;
+}
+
+.nowaikit-ai-send-btn:hover {
+  opacity: 0.85;
+}
+
+.nowaikit-ai-send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.nowaikit-ai-input-hint {
+  font-size: 10px;
+  color: #4a5568;
+  text-align: center;
+  margin-top: 6px;
+}
+
+/* Light theme overrides */
+body.nowaikit-light .nowaikit-ai-sidebar {
+  background: #ffffff;
+  border-left-color: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-header {
+  background: linear-gradient(135deg, #0a2e5c 0%, #065f50 100%);
+  border-bottom-color: #1e2a3e;
+}
+
+body.nowaikit-light .nowaikit-ai-header-left {
+  color: #fff;
+}
+
+body.nowaikit-light .nowaikit-ai-title {
+  -webkit-text-fill-color: initial;
+}
+body.nowaikit-light .nk-ai-logo-now { background:linear-gradient(135deg,#fff 0%,#dde4ec 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
+body.nowaikit-light .nk-ai-logo-kit { background:linear-gradient(135deg,#c8d0dc 0%,#a0aebe 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
+body.nowaikit-light .nk-ai-logo-suffix { -webkit-text-fill-color:rgba(255,255,255,0.55); }
+
+body.nowaikit-light .nowaikit-ai-header-actions .nowaikit-ai-btn-icon {
+  color: rgba(255,255,255,0.7);
+}
+
+body.nowaikit-light .nowaikit-ai-header-actions .nowaikit-ai-btn-icon:hover {
+  background: rgba(255,255,255,0.2);
+  color: #fff;
+}
+
+body.nowaikit-light .nowaikit-ai-bridge-status {
+  background: #f1f5f9;
+  border-bottom-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-message-user .nowaikit-ai-message-content {
+  background: rgba(0, 212, 170, 0.06);
+  border-color: rgba(0, 212, 170, 0.12);
+}
+
+body.nowaikit-light .nowaikit-ai-message-content pre {
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content pre code {
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content code {
+  background: #f1f5f9;
+  color: #0D9488;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content strong {
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content h3,
+body.nowaikit-light .nowaikit-ai-message-content h4 {
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-message-content li {
+  color: #334155;
+}
+
+body.nowaikit-light .nowaikit-ai-avatar-user {
+  background: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-copy-code-btn {
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-copy-code-btn:hover {
+  background: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-insert-btn {
+  background: rgba(13, 148, 136, 0.08);
+  color: #0D9488;
+  border-color: rgba(13, 148, 136, 0.2);
+}
+
+body.nowaikit-light .nowaikit-ai-label {
+  color: #64748b;
+}
+
+body.nowaikit-light .nowaikit-ai-typing {
+  color: #94a3b8;
+}
+
+body.nowaikit-light .nowaikit-ai-input-hint {
+  color: #94a3b8;
+}
+
+body.nowaikit-light .nowaikit-ai-welcome-hint {
+  color: #64748b;
+  background: rgba(13, 148, 136, 0.04);
+  border-color: rgba(13, 148, 136, 0.1);
+}
+
+body.nowaikit-light .nowaikit-ai-error .nowaikit-ai-message-content {
+  border-color: #f87171;
+  color: #dc2626;
+}
+
+body.nowaikit-light .nowaikit-ai-chat-input {
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-input-wrapper {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-input-area {
+  background: #f8fafc;
+  border-top-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-settings-panel {
+  background: #f8fafc;
+  border-bottom-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-select,
+body.nowaikit-light .nowaikit-ai-input {
+  background: #ffffff;
+  border-color: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-quick-btn {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+body.nowaikit-light .nowaikit-ai-quick-btn:hover {
+  background: rgba(0, 212, 170, 0.06);
+  color: #0D9488;
+}
+
+body.nowaikit-light .nowaikit-ai-btn-icon {
+  color: #94a3b8;
+}
+
+body.nowaikit-light .nowaikit-ai-btn-icon:hover {
+  background: #e2e8f0;
+  color: #1a202c;
+}
+
+body.nowaikit-light .nowaikit-ai-welcome-sub {
+  color: #64748b;
+}
+
+body.nowaikit-light .nowaikit-ai-messages::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+}
+
+body.nowaikit-light .nowaikit-ai-quick-actions {
+  border-top-color: #e2e8f0;
+}
+
+body.nowaikit-light .nowaikit-ai-chat-input::placeholder {
+  color: #94a3b8;
+}
+
+body.nowaikit-light .nowaikit-ai-toggle.active {
+  background: #e2e8f0;
+}
+
+/* Theme toggle button active state */
+.nowaikit-ai-btn-icon.nowaikit-ai-theme-active {
+  color: #00D4AA;
+}
+
+body.nowaikit-light .nowaikit-ai-btn-icon.nowaikit-ai-theme-active {
+  color: #0D9488;
+}
+
+/* Responsive: narrower screens */
+@media (max-width: 520px) {
+  .nowaikit-ai-sidebar {
+    width: 100vw;
+    right: -100vw;
+  }
+  .nowaikit-ai-sidebar.open {
+    right: 0;
+  }
+  .nowaikit-ai-sidebar.floating {
+    top: 0;
+    right: 0;
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
+}