@orangecatai/adgen-canvas 0.0.2 → 0.0.4

package/dist/dev/index.css

@@ -2947,11 +2947,23 @@
 
 /* components/Actions.scss */
 .zoom-actions,
-.undo-redo-buttons {
+.undo-redo-buttons,
+.scroll-back-to-content-button {
   background-color: var(--island-bg-color);
   border-radius: var(--border-radius-lg);
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
 }
+.footer-canvas-actions {
+  align-items: flex-start;
+}
+.footer-canvas-actions-row {
+  align-items: center;
+}
+.footer-canvas-actions-row .undo-redo-buttons {
+  margin-top: 0;
+  margin-bottom: 0;
+  align-self: center;
+}
 .zoom-button,
 .undo-redo-buttons button {
   border-radius: 0 !important;
@@ -9393,5 +9405,872 @@ body.excalidraw-cursor-resize * {
     }
   }
 }
+
+/* components/AIChatPanel.scss */
+.excalidraw .acp {
+  position: fixed;
+  right: 0;
+  top: 0;
+  height: 100vh;
+  width: 380px;
+  z-index: var(--zIndex-modal);
+  pointer-events: all;
+  overflow: hidden;
+  font-family:
+    "Assistant",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-size: 14px;
+  color: #111;
+}
+.excalidraw .acp input[type=file] {
+  display: none !important;
+}
+.excalidraw .acp textarea,
+.excalidraw .acp input[type=text],
+.excalidraw .acp input[type=search] {
+  all: unset !important;
+  box-sizing: border-box !important;
+}
+.excalidraw .acp button {
+  all: unset !important;
+  box-sizing: border-box !important;
+  cursor: pointer !important;
+}
+.excalidraw .acp .acp-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: #fff;
+  border-left: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.06);
+  animation: acp-slide-in 0.18s ease;
+}
+@keyframes acp-slide-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.excalidraw .acp .acp-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  height: 48px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-title-btn {
+  display: flex !important;
+  align-items: center !important;
+  gap: 5px !important;
+  padding: 4px 8px !important;
+  border-radius: 7px !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  color: #111 !important;
+  transition: background 0.1s !important;
+  min-width: 0 !important;
+  max-width: 200px !important;
+}
+.excalidraw .acp .acp-title-btn span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.excalidraw .acp .acp-title-btn svg {
+  flex-shrink: 0;
+  color: #888;
+}
+.excalidraw .acp .acp-title-btn:hover {
+  background: rgba(0, 0, 0, 0.05) !important;
+}
+.excalidraw .acp .acp-header-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.excalidraw .acp .acp-icon-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 30px !important;
+  height: 30px !important;
+  border-radius: 7px !important;
+  color: #888 !important;
+  transition: background 0.1s, color 0.1s !important;
+}
+.excalidraw .acp .acp-icon-btn:hover {
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: #333 !important;
+}
+.excalidraw .acp .acp-history-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 8px;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  z-index: 10;
+  overflow: hidden;
+}
+.excalidraw .acp .acp-history-search {
+  display: flex !important;
+  align-items: center !important;
+  gap: 7px !important;
+  padding: 10px 12px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
+}
+.excalidraw .acp .acp-history-search svg {
+  color: #bbb;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-history-search input {
+  flex: 1 !important;
+  font-family: inherit !important;
+  font-size: 13px !important;
+  color: #111 !important;
+  background: transparent !important;
+}
+.excalidraw .acp .acp-history-search input::placeholder {
+  color: #bbb !important;
+}
+.excalidraw .acp .acp-history-list {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.excalidraw .acp .acp-history-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  width: 100% !important;
+  padding: 7px 10px !important;
+  border-radius: 7px !important;
+  font-family: inherit !important;
+  font-size: 13px !important;
+  color: #222 !important;
+  background: transparent !important;
+  text-align: left !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-history-item svg {
+  color: #bbb;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-history-item span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.excalidraw .acp .acp-history-item:hover {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+.excalidraw .acp .acp-history-item--new {
+  color: #6350dc !important;
+}
+.excalidraw .acp .acp-history-item--new svg {
+  color: #6350dc;
+}
+.excalidraw .acp .acp-history-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: 12px;
+  color: #bbb;
+}
+.excalidraw .acp .acp-messages-wrap {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+}
+.excalidraw .acp .acp-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: 20px;
+  padding: 32px 24px;
+  text-align: center;
+}
+.excalidraw .acp .acp-empty-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: rgba(99, 80, 220, 0.08);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #6350dc;
+}
+.excalidraw .acp .acp-empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #111;
+  margin-bottom: 4px;
+}
+.excalidraw .acp .acp-empty-sub {
+  font-size: 13px;
+  color: #999;
+  line-height: 1.5;
+}
+.excalidraw .acp .acp-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  max-width: 300px;
+}
+.excalidraw .acp .acp-chip {
+  display: flex !important;
+  align-items: center !important;
+  padding: 6px 14px !important;
+  border-radius: 20px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  font-family: inherit !important;
+  font-size: 12.5px !important;
+  font-weight: 500 !important;
+  color: #555 !important;
+  background: #fafafa !important;
+  transition: background 0.1s, border-color 0.1s !important;
+  white-space: nowrap !important;
+}
+.excalidraw .acp .acp-chip:hover {
+  background: rgba(99, 80, 220, 0.06) !important;
+  border-color: rgba(99, 80, 220, 0.25) !important;
+  color: #6350dc !important;
+}
+.excalidraw .acp .acp-chat-root {
+  height: 100% !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+}
+.excalidraw .acp .acp-chat-content {
+  display: flex !important;
+  flex-direction: column !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box !important;
+  padding: 24px 20px 12px !important;
+  gap: 2px !important;
+}
+.excalidraw .acp .acp-msg {
+  display: flex !important;
+  flex-direction: row !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+  gap: 0 !important;
+  margin-bottom: 2px !important;
+}
+.excalidraw .acp .acp-msg--assistant {
+  justify-content: flex-start !important;
+}
+.excalidraw .acp .acp-msg--user {
+  justify-content: flex-end !important;
+}
+.excalidraw .acp .acp-msg-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  max-width: 100%;
+}
+.acp-msg--user .excalidraw .acp .acp-msg-inner {
+  align-items: flex-end;
+  max-width: 80%;
+}
+.acp-msg--assistant .excalidraw .acp .acp-msg-inner {
+  align-items: flex-start;
+  width: 100%;
+  max-width: 100%;
+}
+.excalidraw .acp .acp-msg-inner .acp-msg-actions {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.excalidraw .acp .acp-msg-inner:hover .acp-msg-actions {
+  opacity: 1;
+}
+.excalidraw .acp .acp-msg-actions--visible {
+  opacity: 1 !important;
+}
+.excalidraw .acp .acp-content-assistant {
+  background: transparent !important;
+  border-radius: 0 !important;
+  padding: 6px 0 !important;
+  font-size: 14px !important;
+  line-height: 1.6 !important;
+  color: #111 !important;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+.excalidraw .acp .acp-content-assistant p {
+  margin: 0 0 8px;
+}
+.excalidraw .acp .acp-content-assistant p:last-child {
+  margin-bottom: 0;
+}
+.excalidraw .acp .acp-content-assistant code {
+  font-size: 12.5px;
+  background: #f4f4f4;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+.excalidraw .acp .acp-content-assistant pre {
+  background: #f4f4f4;
+  padding: 10px 12px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+.excalidraw .acp .acp-content-assistant ul,
+.excalidraw .acp .acp-content-assistant ol {
+  padding-left: 18px;
+  margin: 4px 0;
+}
+.excalidraw .acp .acp-content-assistant li {
+  margin-bottom: 2px;
+}
+.excalidraw .acp .acp-content-assistant strong {
+  font-weight: 600;
+}
+.excalidraw .acp .acp-content-user {
+  background: #1c1c1c !important;
+  color: #fff !important;
+  border-radius: 20px 20px 4px 20px !important;
+  padding: 10px 16px !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  max-width: 85% !important;
+  word-break: break-word !important;
+  white-space: pre-wrap !important;
+}
+.excalidraw .acp .acp-msg-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 0 !important;
+  margin-left: -4px !important;
+}
+.acp-msg--user .excalidraw .acp .acp-msg-actions {
+  margin-left: 0 !important;
+  margin-right: -4px !important;
+}
+.excalidraw .acp .acp-action-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: 50% !important;
+  color: #aaa !important;
+  transition: background 0.1s, color 0.1s !important;
+}
+.excalidraw .acp .acp-action-btn:hover {
+  background: rgba(0, 0, 0, 0.07) !important;
+  color: #444 !important;
+}
+.excalidraw .acp .acp-loading-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 4px;
+}
+.excalidraw .acp .acp-loading-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #ccc;
+  animation: acp-dot 1.2s ease-in-out infinite;
+}
+.excalidraw .acp .acp-loading-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.excalidraw .acp .acp-loading-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes acp-dot {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  30% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
+}
+.excalidraw .acp .acp-scroll-anchor {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+}
+.excalidraw .acp .acp-scroll-btn {
+  width: 34px !important;
+  height: 34px !important;
+  border-radius: 50% !important;
+  background: #fff !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  color: #555 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition:
+    background 0.1s,
+    transform 0.15s,
+    opacity 0.15s !important;
+}
+.excalidraw .acp .acp-scroll-btn:hover {
+  background: #f5f5f5 !important;
+}
+.excalidraw .acp .acp-scroll-btn svg {
+  width: 16px !important;
+  height: 16px !important;
+}
+.excalidraw .acp .acp-error {
+  margin: 0 12px 8px;
+  padding: 8px 12px;
+  background: #fff0f0;
+  border: 1px solid #ffd0d0;
+  border-radius: 8px;
+  font-size: 12.5px;
+  color: #c0392b;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-input-area {
+  padding: 8px 12px 14px;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-prompt-input {
+  border-radius: 24px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  background: #fff !important;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
+  padding: 0 !important;
+  cursor: text !important;
+}
+.excalidraw .acp .acp-textarea {
+  display: block !important;
+  width: 100% !important;
+  min-height: 44px !important;
+  max-height: 160px !important;
+  overflow-y: auto !important;
+  resize: none !important;
+  padding: 14px 16px 6px !important;
+  font-family: inherit !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #111 !important;
+  background: transparent !important;
+  border: none !important;
+  outline: none !important;
+  -webkit-appearance: none !important;
+}
+.excalidraw .acp .acp-textarea::placeholder {
+  color: #bbb !important;
+}
+.excalidraw .acp .acp-actions-bar {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 4px 8px 8px !important;
+  gap: 4px !important;
+}
+.excalidraw .acp .acp-actions-left,
+.excalidraw .acp .acp-actions-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.excalidraw .acp .acp-pill-btn {
+  display: flex !important;
+  align-items: center !important;
+  gap: 5px !important;
+  height: 32px !important;
+  padding: 0 12px !important;
+  border-radius: 20px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  font-family: inherit !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  color: #444 !important;
+  background: #fff !important;
+  white-space: nowrap !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-pill-btn--icon {
+  padding: 0 !important;
+  width: 32px !important;
+  justify-content: center !important;
+}
+.excalidraw .acp .acp-pill-btn svg {
+  flex-shrink: 0;
+  color: #666;
+}
+.excalidraw .acp .acp-pill-btn:hover {
+  background: #f5f5f5 !important;
+}
+.excalidraw .acp .acp-pill-btn--active {
+  background: rgba(99, 80, 220, 0.08) !important;
+  border-color: rgba(99, 80, 220, 0.3) !important;
+  color: #6350dc !important;
+}
+.excalidraw .acp .acp-pill-btn--active svg {
+  color: #6350dc;
+}
+.excalidraw .acp .acp-pill-btn--active:hover {
+  background: rgba(99, 80, 220, 0.14) !important;
+}
+.excalidraw .acp .acp-pill-btn--transcribing {
+  background: rgba(99, 80, 220, 0.08) !important;
+  border-color: rgba(99, 80, 220, 0.2) !important;
+  cursor: default !important;
+}
+.excalidraw .acp .acp-pill-btn--transcribing svg {
+  color: #6350dc;
+}
+.excalidraw .acp .acp-pill-btn--recording {
+  background: rgba(220, 53, 69, 0.08) !important;
+  border-color: rgba(220, 53, 69, 0.3) !important;
+  color: #dc3545 !important;
+  animation: acp-pulse 1.5s ease-in-out infinite;
+}
+.excalidraw .acp .acp-pill-btn--recording svg {
+  color: #dc3545;
+}
+.excalidraw .acp .acp-pill-btn--recording:hover {
+  background: rgba(220, 53, 69, 0.14) !important;
+}
+.excalidraw .acp .acp-pill-btn:disabled {
+  opacity: 0.4 !important;
+  cursor: not-allowed !important;
+}
+@keyframes acp-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+@keyframes acp-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.excalidraw .acp .acp-mic-spinner {
+  animation: acp-spin 0.85s linear infinite;
+}
+.excalidraw .acp .acp-send-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 32px !important;
+  height: 32px !important;
+  border-radius: 50% !important;
+  background: #1c1c1c !important;
+  color: #fff !important;
+  flex-shrink: 0 !important;
+  transition: background 0.12s, transform 0.1s !important;
+}
+.excalidraw .acp .acp-send-btn:hover {
+  background: #333 !important;
+}
+.excalidraw .acp .acp-send-btn:active {
+  transform: scale(0.94) !important;
+}
+.excalidraw .acp .acp-send-btn:disabled {
+  background: #d8d8d8 !important;
+  cursor: not-allowed !important;
+}
+.excalidraw .acp .acp-stop-square {
+  display: block;
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  border-radius: 2px;
+}
+.excalidraw .acp .acp-status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 4px;
+}
+.excalidraw .acp .acp-status-text {
+  font-size: 12.5px;
+  color: #888;
+  font-style: italic;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.excalidraw .acp .acp-tool-actions {
+  margin-bottom: 4px;
+}
+.excalidraw .acp .acp-tool-actions-toggle {
+  display: flex !important;
+  align-items: center !important;
+  gap: 6px !important;
+  padding: 5px 10px !important;
+  border-radius: 8px !important;
+  font-family: inherit !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  color: #888 !important;
+  background: rgba(0, 0, 0, 0.03) !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-tool-actions-toggle:hover {
+  background: rgba(0, 0, 0, 0.06) !important;
+  color: #555 !important;
+}
+.excalidraw .acp .acp-tool-actions-toggle svg {
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-tool-chevron {
+  transition: transform 0.15s ease;
+}
+.excalidraw .acp .acp-tool-chevron--open {
+  transform: rotate(90deg);
+}
+.excalidraw .acp .acp-tool-actions-list {
+  margin: 4px 0 4px 8px;
+  padding-left: 10px;
+  border-left: 2px solid rgba(0, 0, 0, 0.06);
+}
+.excalidraw .acp .acp-tool-action-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 3px 0;
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+}
+.excalidraw .acp .acp-tool-action-item--ok .acp-tool-action-dot {
+  background: #27ae60;
+}
+.excalidraw .acp .acp-tool-action-item--err .acp-tool-action-dot {
+  background: #e74c3c;
+}
+.excalidraw .acp .acp-tool-action-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 5px;
+}
+.excalidraw .acp .acp-attachments-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 12px 4px;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-attachment-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.04);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 12px;
+  font-weight: 500;
+  color: #555;
+  max-width: 200px;
+}
+.excalidraw .acp .acp-attachment-pill svg {
+  flex-shrink: 0;
+  color: #888;
+}
+.excalidraw .acp .acp-attachment-pill span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.excalidraw .acp .acp-attachment-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-attachment-remove {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: transparent !important;
+  color: #888 !important;
+  flex-shrink: 0 !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-attachment-remove:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+  color: #444 !important;
+}
+.excalidraw .acp .acp-msg-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.excalidraw .acp .acp-msg-att-thumb {
+  max-width: 160px;
+  max-height: 120px;
+  border-radius: 12px;
+  object-fit: cover;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  display: block;
+}
+.excalidraw .acp .acp-msg-att-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 11.5px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.excalidraw .acp .acp-msg-att-pill svg {
+  flex-shrink: 0;
+  color: rgba(255, 255, 255, 0.6);
+}
+.excalidraw .acp .acp-ref-area {
+  padding: 0 12px 4px;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-ref-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 14px;
+  background: rgba(99, 80, 220, 0.08);
+  border: 1px solid rgba(99, 80, 220, 0.2);
+  font-size: 12px;
+  font-weight: 500;
+  color: #6350dc;
+}
+.excalidraw .acp .acp-ref-pill svg {
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-ref-pill span {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.excalidraw .acp .acp-ref-remove {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 16px !important;
+  height: 16px !important;
+  border-radius: 50% !important;
+  background: transparent !important;
+  color: #6350dc !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-ref-remove:hover {
+  background: rgba(99, 80, 220, 0.15) !important;
+}
+.excalidraw .acp .acp-input-wrapper {
+  position: relative;
+}
+.excalidraw .acp .acp-mention-menu {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 8px;
+  right: 8px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06);
+  z-index: 10;
+  overflow: hidden;
+  padding: 4px;
+}
+.excalidraw .acp .acp-mention-item {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+  width: 100% !important;
+  padding: 8px 12px !important;
+  border-radius: 8px !important;
+  font-family: inherit !important;
+  font-size: 13px !important;
+  color: #333 !important;
+  background: transparent !important;
+  text-align: left !important;
+  transition: background 0.1s !important;
+}
+.excalidraw .acp .acp-mention-item svg {
+  color: #6350dc;
+  flex-shrink: 0;
+}
+.excalidraw .acp .acp-mention-item:hover {
+  background: rgba(99, 80, 220, 0.06) !important;
+}
+.excalidraw .acp .acp-mention-dim {
+  color: #999;
+  font-size: 11.5px;
+  font-weight: 400;
+}
+.excalidraw .acp .acp-mention-empty {
+  padding: 12px;
+  font-size: 12.5px;
+  color: #999;
+  text-align: center;
+  line-height: 1.4;
+}
+.excalidraw .acp-open-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  background: #fff !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  color: #333 !important;
+  cursor: pointer !important;
+  transition: background 0.12s, box-shadow 0.12s !important;
+  box-sizing: border-box !important;
+}
+.excalidraw .acp-open-btn:hover {
+  background: #f5f5f5 !important;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
+}
+.excalidraw .acp-open-btn:active {
+  transform: scale(0.95) !important;
+}
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 /*# sourceMappingURL=index.css.map */