body, html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  font-family: Arial, sans-serif;
  user-select: none;
  background-color: transparent;
  color: #fff;
  overflow: hidden; 
}

/* Dark scrollbar styling for DQS preview modal */
#dqsPreviewContent::-webkit-scrollbar {
  width: 12px;
}

#dqsPreviewContent::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 0px;
}

#dqsPreviewContent::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 0px;
}

#dqsPreviewContent::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* DQS extend reference highlighting */
.dqs-line-highlight {
  background-color: rgba(255, 255, 0, 0.2) !important;
  transition: background-color 0.2s;
}

#toolbar {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 34, 34, 0.85);
  backdrop-filter: blur(10px);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #444;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  min-height: 56px;
}

/* Mindmap Directory (Breadcrumb) - fixed to left, always visible */
#mindmapDirectory {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10001 !important;
  border-radius: 8px !important;
  padding: 8px 20px 8px 14px !important;
  font-size: 16px !important;
  color: #222 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  user-select: none !important;
  overflow-x: auto !important;
  font-weight: 500 !important;
  transition: box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  scrollbar-width: thin !important;
  scrollbar-color: #ccc transparent !important;
}

#mindmapDirectory::-webkit-scrollbar {
  height: 4px !important;
}

#mindmapDirectory::-webkit-scrollbar-track {
  background: transparent !important;
}

#mindmapDirectory::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 2px !important;
}

#mindmapDirectory::-webkit-scrollbar-thumb:hover {
  background: #aaa !important;
}

#mindmapDirectory span {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-right: 4px !important;
  cursor: pointer !important;
  transition: text-decoration 0.2s;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
#mindmapDirectory span:last-child {
  color: #fff !important;
  font-weight: bold !important;
  cursor: default !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}
#mindmapDirectory span:hover {
  text-decoration: underline !important;
}
#mindmapDirectory .breadcrumb-sep {
  color: #fff !important;
  margin: 0 2px !important;
  font-size: 16px !important;
  user-select: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Bottom toolbar - hidden on desktop, shown on mobile */
#bottomToolbar {
  display: none;
}

/* Ensure buttons work correctly in main toolbar on desktop */
#toolbar #undoBtn,
#toolbar #redoBtn,
#toolbar #addThoughtBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide mobile menu button on desktop */
#mobileMenuBtn {
  display: none;
}

/* Dropdown in main toolbar */
#toolbar .dropdown {
  position: relative;
}

#toolbar .dropdown-content {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
}

.toolbar-btn {
  background: #333;
  border: none;
  color: white;
  padding: 0 12px;
  height: 44px;
  min-width: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  font-size: 16px;
  box-sizing: border-box;
}

/* Icon-only buttons should be square */
#addThoughtBtn {
  width: 44px !important;
  padding: 0 !important;
  justify-content: center !important;
  min-width: 44px !important;
  max-width: 44px !important;
}

.toolbar-btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.toolbar-btn:hover {
  background: #fff;
  color: #222;
}

.toolbar-label {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  vertical-align: middle;
  user-select: none;
}

#toolbar .dropdown {
  display: flex;
  align-items: center;
}

#toolbar .dropdown .toolbar-btn {
  padding: 0 10px;
}

#toolbar button {
  background: #555;
  border: none;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 3px;
}

#toolbar button:hover {
  background: #777;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.thought-table {
  background: #222;
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
}
.thought-table td {
  min-width: 40px;
  min-height: 24px;
}

.thought-table {
  overflow: hidden !important;
}
.thought-table td {
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.thought-table button {
  background: #333;
  color: #fff;
  border: 1px solid #666;
  border-radius: 3px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}
.thought-table button:hover {
  background: #555;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #444;
  min-width: 180px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  margin-top: 2px;
  left: 0;           
  top: 100%;         
  margin-top: 6px;
  right: auto;       
  transform: none;   
}

.tdopt {
  display: flex;
  align-items: center;
  flex-direction: row;
}

#exportDropdown {
  left: auto;
  right: 0;
  margin-right: 8px; 
}

.dropdown-content div:not(.dropdown-divider) {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-content div:not(.dropdown-divider):hover {
  background-color: #555;
}

.show {
  display: block;
}


.dropdown-divider {
  height: 0;
  border-top: 1px solid #666;
  width: 100%;
  margin: 0;
  opacity: 0.8;
  background: none;
  pointer-events: none;
}


.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal[style*="display: block"] {
  display: flex !important;
}

.modal-content {
  background-color: #222;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border: 1px solid #444;
}

.modal-content h3 {
  margin-top: 0;
  color: white;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.close-btn {
  background: none;
  border: none;
  color: #aaa;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #fff;
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 15px 0;
}

.link-input {
  display: flex;
  gap: 5px;
}

.link-input input {
  flex: 1;
  padding: 5px;
  background: #555;
  border: 1px solid #666;
  color: white;
  border-radius: 3px;
}


.attachment-upload-area {
  border: 4px dashed #555;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #2a2a2a;
  margin: 20px 0;
  width: 100%;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.attachment-upload-area:hover {
  border-color: #777;
  background: #333;
}

.attachment-upload-area.dragover {
  border-color: #58a6ff;
  background: #1e3a5f;
}

.upload-area-content {
  pointer-events: none;
}

.upload-icon {
  color: #777;
  margin-bottom: 16px;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-text {
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
  font-weight: 500;
}

.upload-subtitle {
  font-size: 14px;
  color: #888;
}

#confirmPngExport,
#cancelPngExport {
  background: #555;
  color: #fff;
  border: 1px solid #666;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  margin-top: 15px;
}

#confirmPngExport:hover,
#cancelPngExport:hover {
  background: #666;
}

.cancel-btn {
  background: #555;
  color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
  margin-top: 15px;
}

.cancel-btn:hover {
  background: #666;
}


.signing-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.signing-popup-content {
  background: #fff;
  border: 1px solid rgb(68, 68, 68);
  min-width: 45vw;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 0px;
  display: flex;
  flex-direction: column;
}


.signing-tabs {
  display: flex;
  background: #1a1a1a;
  border-radius: 0px;
  overflow: hidden;
}

.signing-tab {
  flex: 1;
  padding: 12px 16px;
  background: #333;
  color: #ccc;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  position: relative;
}

.signing-tab:first-child {
  border-radius: 0px;
}

.signing-tab:last-child {
  border-radius: 0px;
}

.signing-tab:hover {
  background: #3a3a3a;
  color: #fff;
}

.signing-tab.active {
  background: #2a2a2a;
  color: #fff;
}

.signing-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: #2a2a2a;
}


.signing-content {
  display: none;
  padding: 20px;
  background: #2a2a2a;
  border-radius: 0px;
}

.signing-content.active {
  display: block;
}

.signing-field {
  margin-bottom: 15px;
}

.signing-field label {
  display: block;
  margin-bottom: 5px;
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
}

.signing-field input[type="text"],
.signing-field input[type="password"] {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0px;
  padding: 7px 12px;
  font-size: 15px;
  transition: border-color 0.2s;
  outline: none;
}
.signing-field input[type="text"]:focus,
.signing-field input[type="password"]:focus {
  border: 2px solid #fff;
  outline: none;
  box-shadow: none;
}


.signing-field input.author-field:focus {
  border: 2px solid #444;
  outline: none;
  box-shadow: none;
  color: #fff;
}


.signing-field input[type="text"],
.signing-field input[type="password"] {
  width: 100%;
  box-sizing: border-box;
}

.signing-field input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
}

#signatureCanvas {
  border: 2px solid #444;
  border-radius: 0px;
  background: #fff;
  cursor: crosshair;
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
  width: 100%;
  max-width: 350px;
  height: 120px;
}

#clearSignature {
  background: #666;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 0px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
}

#clearSignature:hover {
  background: #777;
}

.signing-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: flex-end;
  align-items: center;
}

.commit-btn {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 6px 12px !important;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  width: auto;
  height: 36px !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-width: 1px;
  border-style: solid;
}

.commit-btn:hover {
  background: #444;
}

.cancel-btn {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 6px 12px !important;
  border-radius: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  width: auto;
  height: 36px !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  border-width: 1px;
  border-style: solid;
}

.cancel-btn:hover {
  background: #444;
  color: #fff;
}


.toggle-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.toggle-switch {
  width: 32px;
  height: 18px;
  background: #bbb;
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #ccc;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: #fff;
  top: 1px;
  left: 1px;
  transition: transform 0.2s;
  box-shadow: none;
  border: 1px solid #ccc;
}

.toggle-switch.active {
  background: #4af;
  border-color: #4af;
}

.toggle-switch.active::after {
  transform: translateX(15px);
}

.toggle-label {
  font-size: 14px;
  color: #fff;
  user-select: none;
  margin-bottom: 2px;
}


.signing-document {
  padding: 20px;
  background: white;
  color: #333;
  border-radius: 0 0 8px 8px;
  font-family: 'Times New Roman', serif;
}

.document-header {
  text-align: center;
  margin-bottom: 24px;
  border-bottom: 2px solid #333;
  padding-bottom: 16px;
}

.document-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.document-subtitle {
  font-size: 14px;
  color: #666;
}

.document-section {
  margin-bottom: 20px;
}

.document-section h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

.property-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 0;
}

.property-label {
  font-weight: bold;
  color: #555;
  flex: 1;
}

.property-value {
  flex: 2;
  text-align: right;
}

.status-valid {
  color: #22c55e;
  font-weight: bold;
}

.signature-display {
  text-align: center;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fafafa;
}

.signature-display img {
  max-width: 100%;
  max-height: 120px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

.download-btn, .clear-btn {
  background: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.download-btn {
  background: #222;
  color: #fff;
}

.download-btn:hover {
  background: #444;
}

.clear-btn {
  background: #222;
  color: #fff;
}

.clear-btn:hover {
  background: #444;
}

#canvas {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: transparent;
    cursor: grab;
    width: 100vw;
    height: 100vh;
}

#canvas-content {
  position: absolute;
  top: 0;      
  left: 0;     
  width: 200vw;  
  height: 200vh; 
  transform-origin: 0 0;
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  z-index: 1;
  
  box-sizing: border-box; 
}

#connections-svg {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  
}

.thought {
  position: absolute;
     
  min-height: 0;
  
  width: auto; 
  word-break: break-word;
  white-space: pre-wrap;
  background: #fff;
  border: 2px solid #666;
   
  padding: 6px 8px;
  box-sizing: border-box;
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  z-index: 10; 
  transition: box-shadow, border-color, background-color, opacity 0.3s ease;
  font-size: 16px; 
  line-height: normal; 
}


.thought.pasted {
  z-index: 20 !important; 
}


svg.pasted-connection {
  z-index: 15 !important; 
  
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}


.thought, .thought * {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}


.thought span[style*="font-size"] {
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}


.thought img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}


#canvas.panning,
#canvas.zooming {
  
  text-rendering: optimizeSpeed;
}

#canvas.panning .thought,
#canvas.zooming .thought {
  
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


.thought.dragging {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


.thought.dragging img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  will-change: transform;
  pointer-events: none;
}


.thought.note-thought {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.thought.note-thought:hover {
  opacity: 1;
}


.thought.variable-thought {
  color: #ff1493 !important;   
  font-weight: normal;
}

.thought.conditional-thought {
  color: #39ff14 !important;
}

.conditional-thought * {
  color: inherit !important;
}

.thought.variable-thought:hover {
  outline: 2px solid rgba(255, 20, 147, 0.8);
}

.thought.formula-thought:hover {
  outline: 2px solid rgba(0, 255, 255, 0.8); 
}

.thought.executable-thought:hover {
  outline: 2px solid rgba(255, 215, 0, 0.8); 
}

.thought.meta-thought:hover {
  outline: 2px solid rgba(255, 0, 0, 0.8); 
}

.thought.conditional-thought:hover {
  outline: 2px solid rgba(57, 255, 20, 0.8); 
}

.thought.function-thought {
  background: #446;
  border-color: #668;
}

.thought.function-thought.link {
  background: #447;
  border-color: #66f;
  color: #99f;
  cursor: pointer;
}

.thought.function-thought img {
  max-width: none; 
  max-height: none; 
  object-fit: contain;
}

/* Video-specific styling - ensure no rounding and proper fit */
.thought.function-thought video,
.thought.function-thought canvas {
  border-radius: 0 !important; /* Never round videos */
  max-width: none;
  max-height: none;
}

/* Video wrapper styling - ensure tight fit around video */
.thought.function-thought video,
.thought.function-thought canvas {
  display: block;
  object-fit: cover;
}


.thought.function-thought .image-container {
  position: relative;
  display: inline-block;
}

.thought.function-thought .resize-handle {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  cursor: nw-resize;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #666;
  border-radius: 2px;
  z-index: 10;
  pointer-events: auto;
}

.thought.function-thought .resize-handle:hover {
  background: rgba(255, 255, 255, 0.95);
}

.thought.function-thought.file-thought {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 10px;   
  padding-bottom: 10px;
  min-height: 80px;    
}

.thought.function-thought.file-thought img,
.thought.function-thought.file-thought .file-icon {
  margin-bottom: 8px;  
  margin-top: 0;       
  display: block;
}

.thought.function-thought.file-thought .file-name {
  margin-top: 0;
  margin-bottom: 4px;  
  text-align: center;
  word-break: break-word;
  font-size: 13px;
}

.thought.dragging {
  opacity: 0.8;
  cursor: grabbing;
}

.connection-line {
  position: absolute;
  height: 2px;
  transform-origin: 0 0;
  pointer-events: auto;
  z-index: 1;
  background: #aaa;
  cursor: pointer;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0));
}

.connection-line:hover {
  background: red !important;
  filter: drop-shadow(0 0 2px rgba(255,0,0,0.8));
}


body.readonly .connection-line:hover,
body.readonly #connections-svg line:hover,
svg .connection-line[style*="pointer-events: none"]:hover,
#connections-svg line[style*="pointer-events: none"]:hover {
  stroke: inherit !important;
  filter: none !important;
  background: inherit !important;
}


.thought.start.gradient,
.thought.end.gradient {
  border-color: #fff !important;
  box-shadow: 0 0 15px 3px rgba(255,255,255,0.7), inset 0 0 8px rgba(255,255,255,0.3);
}

#signing-console {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 220px;
  height: 220px;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
  font-size: 13px;
  padding: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0.97;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden; 
  word-break: break-word; 
  white-space: pre-wrap;  
}

.signing-console {
  height: 220px;           
  max-height: 220px;       
  overflow-y: hidden;      
  background: #181818;
  color: #fff;
  font-family: monospace;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
}

#signing-console .console-line {
  width: 100%;
  padding: 0 18px 0 14px;
  box-sizing: border-box;
  text-align: left;
  white-space: pre-wrap;      
  word-break: break-word;     
  overflow-wrap: break-word;  
}

.context-menu-option {
  padding: 4px 10px;
  cursor: pointer;
  color: #fff;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  font-size: 12px;
  transition: background 0.2s;
}

.context-menu-option:hover:not(.disabled) {
  background: #444;
}

.context-menu-option.disabled {
  color: #888;
  cursor: not-allowed;
}

.context-divider {
  height: 0;
  border-top: 1px solid #444;
  margin: 0 4px;
}

.copy-ids {
  margin-left: -5px; 
}

.thought-text-wrap {
  display: block;
  width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}


.formatting-toolbar {
  display: flex;
  gap: 4px;
  align-items: center;
  background: #222;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #555;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 99999;
}
.formatting-toolbar button {
  background: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 15px;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.formatting-toolbar button:hover {
  background: #555;
}
.formatting-toolbar button:focus,
.formatting-toolbar button[style*="outline"],
.formatting-toolbar button.active {
  outline: 2px solid #fff !important;
}
.formatting-toolbar select,
.formatting-toolbar input[type="color"] {
  margin: 0 4px;
}

.thought[type="text"], .thought.text-thought {
  background: #fff !important;
  /* Default color for thoughts without inline styling, but allow inline colors to override */
  color: #000;
}

.thought.editing {
  user-select: text !important;
  cursor: text !important;
}

.thought a,
.thought a[href],
.thought a:link,
.thought a:visited {
  color: #1787f7 !important; /* Make links blue */
  text-decoration: none !important;
  position: relative;
  z-index: 100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transition: text-decoration 0.2s; /* Smooth transition for hover effect */
}

.thought a:hover,
.thought a[href]:hover,
.thought a:link:hover,
.thought a:visited:hover {
  text-decoration: underline !important;
  color: #1787f7 !important; /* Ensure color stays blue on hover */
}

.home-btn {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  background: #333; 
  color: #fff;
  border: none;
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10010;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s; 
}
.home-btn:hover {
  background: #444; /* Darker background instead of white */
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.home-btn svg {
  width: 28px;
  height: 28px;
  display: block;
}

#toolbar .toolbar-btn:first-child {
  margin-left: 5px;
}

.toolbar-spacer {
  flex: 1;
}

/* Active state for buttons in vertical toolbar layouts */
#toolbar[data-alignment="left"] .toolbar-btn.active,
#toolbar[data-alignment="right"] .toolbar-btn.active {
  border: 2px solid #fff;
  background: #444;
}

/* Dropdown positioning for bottom-aligned toolbar */
#toolbar[data-alignment="bottom"] .dropdown-content {
  top: auto !important;
  bottom: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

#exportBtn {
  margin-right: 5px;
}

.thought.gradient {
  border-color: #fff !important;
  box-shadow: 0 0 15px 3px rgba(255,255,255,0.7), inset 0 0 8px rgba(255,255,255,0.3);
}


.ai-chat-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}


.ai-input-capsule {
  display: flex;
  align-items: center;
  background: #292929;
  border-radius: 50px;
  padding: 8px 12px 8px 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  transition: all 0.3s ease;
}

.ai-input-capsule::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 50px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff);
  background-size: 400% 400%;
  animation: gradientShift 3s ease infinite;
  z-index: -1;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ai-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aee6ff;
  margin-right: 12px;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.ai-input-icon:hover {
  background: rgba(174, 230, 255, 0.1);
  color: #4ecdc4;
  transform: scale(1.1);
}

.ai-input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 16px;
  outline: none;
  width: 200px;
  padding: 8px 0;
  padding-right: 60px; 
}

.ai-input::placeholder {
  color: #888;
}

.ai-send-btn {
  background: transparent;
  border: none;
  color: #aee6ff;
  cursor: pointer;
  padding: 8px;
  margin-left: 4px;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-send-btn:hover {
  background: rgba(174, 230, 255, 0.1);
  color: #4ecdc4;
  transform: scale(1.1);
}

.ai-send-btn:disabled {
  color: #555;
  cursor: not-allowed;
  transform: none;
}

.ai-send-btn:disabled:hover {
  background: transparent;
  color: #555;
  transform: none;
}

.ai-char-counter {
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #888;
  pointer-events: none;
  user-select: none;
}


.ai-chat-box {
  width: 388px;
  max-height: 500px; 
  background: #222;
  border-radius: 16px;
  border: 1px solid #444;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-header {
  background: #333;
  padding: 12px 16px;
  border-bottom: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #aee6ff;
  font-weight: 600;
  font-size: 16px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ai-chat-close {
  background: transparent;
  border: none;
  color: #aee6ff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.ai-chat-close:hover {
  background: rgba(174, 230, 255, 0.1);
  color: #ff6b6b;
}

.ai-chat-history {
  background: transparent;
  border: none;
  color: #aee6ff;
  cursor: pointer;
  padding: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.ai-chat-history:hover {
  background: rgba(174, 230, 255, 0.1);
  color: #fff;
}

.ai-chat-new {
  background: transparent;
  border: none;
  color: #aee6ff;
  cursor: pointer;
  padding: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.ai-chat-new:hover {
  background: rgba(174, 230, 255, 0.1);
  color: #fff;
}

.ai-chat-messages {
  flex: 1;
  padding: 16px 16px 20px 16px; 
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px; 
  max-height: 350px; 
  scroll-behavior: auto; 
}

.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
  background: #333;
  border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #666;
}


.ai-message {
  padding: 8px 12px;
  border-radius: 12px;
  max-width: 80%;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.4;
}

.ai-message:last-child {
  margin-bottom: 8px; 
}

.ai-message.user {
  background: #333;
  color: #fff;
  border: 1px solid #4ecdc4;
  align-self: flex-end;
  margin-left: auto;
}

.ai-message.ai {
  background: #333;
  color: #fff;
  align-self: flex-start;
  margin-right: auto;
}


.ai-message.loading {
  background: #333;
  color: #aee6ff;
  align-self: flex-start;
  margin-right: auto;
  font-style: italic;
}

.ai-message.loading::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #aee6ff;
  margin-left: 8px;
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 60%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
}


.ai-message.ai strong {
  font-weight: bold;
  color: #4ecdc4;
}

.ai-message.ai em {
  font-style: italic;
  color: #aee6ff;
}

.ai-message.ai code {
  background-color: #222 !important;
  color: #ffeb3b;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.ai-message.ai blockquote {
  border-left: 3px solid #4ecdc4 !important;
  margin: 8px 0 !important;
  padding-left: 10px !important;
  font-style: italic !important;
  color: #ccc;
  background-color: rgba(78, 205, 196, 0.1);
  border-radius: 0 4px 4px 0;
}

.ai-message.ai li {
  margin: 4px 0;
  padding-left: 8px;
  color: #fff;
}

.ai-message.ai ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
}

.ai-message.ai li::before {
  content: "•";
  color: #4ecdc4;
  font-weight: bold;
  margin-right: 8px;
}


#recentChatsMenu {
  color: #fff;
}

#recentChatsMenu::-webkit-scrollbar {
  width: 6px;
}

#recentChatsMenu::-webkit-scrollbar-track {
  background: #444;
  border-radius: 3px;
}

#recentChatsMenu::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}

#recentChatsMenu::-webkit-scrollbar-thumb:hover {
  background: #777;
}


.ai-chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 16px;
  text-align: center;
  padding: 48px 0 32px 0;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}
.ai-chat-welcome svg {
  margin-bottom: 12px;
  stroke: #888;
}


.ai-message .loader {
  display: inline-block;
  margin-left: 12px;
  margin-right: 12px;
  vertical-align: middle;
  font-size: 3px; 
  transform: scale(0.5) translateY(-8px); 
}


.loader, .loader:before, .loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader {
  color: #FFF;
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

/* Mobile Layout - Rearrange existing buttons */
@media (max-width: 768px) {
  /* Top toolbar: Edit Mode | Style | Clear All, Export */
  #toolbar {
    position: fixed;
    top: 10px;
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    transform: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    min-height: 80px;
    gap: 0;
  }
  
  /* Hide mobile buttons from main toolbar on mobile */
  #toolbar #undoBtn,
  #toolbar #redoBtn,
  #toolbar #addThoughtBtn {
    display: none !important;
  }
  
  /* Hide labels on mobile for cleaner look */
  .toolbar-label {
    display: none !important;
  }
  
  /* Make toolbar buttons WAY bigger for mobile */
  .toolbar-btn {
    min-width: 80px !important;
    height: 80px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make toolbar icons WAY bigger */
  .toolbar-btn svg {
    width: 48px !important;
    height: 48px !important;
  }
  
  /* Active edit mode styling */
  #connectModeBtn.active {
    border: 2px solid white !important;
  }
  
  /* Hide some buttons on mobile to keep it clean */
  #signBtn, .toolbar-spacer {
    display: none !important;
  }
  
  /* Hide style, publish, and post buttons on mobile */
  #styleBtn,
  #publishCoursesBtn,
  #postMindMapBtn {
    display: none !important;
  }
  
  /* Show mobile menu button on mobile */
  #mobileMenuBtn {
    display: flex !important;
  }
  
  /* Move home button below toolbar - smaller with no background */
  .home-btn {
    position: fixed !important;
    top: 120px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 50 !important; /* Lower z-index than dropdowns */
  }
  
  .home-btn svg {
    width: 30px !important;
    height: 30px !important;
    fill: #fff !important; /* Keep icon white always */
  }
  
  /* Show bottom floating toolbar on mobile */
  #bottomToolbar {
    display: flex !important;
    position: fixed !important;
    bottom: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
    z-index: 101 !important;
  }
  
  /* Bottom toolbar buttons styling */
  #bottomToolbar .toolbar-btn {
    background: rgba(51, 51, 51, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(85, 85, 85, 0.8) !important;
    border-radius: 12px !important;
    transition: background 0.2s, color 0.2s, border 0.2s, backdrop-filter 0.2s !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  #bottomToolbar .toolbar-btn:hover {
    background: rgba(68, 68, 68, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }
  
  /* Undo and Redo buttons - bigger and square */
  #bottomToolbar #undoBtn, 
  #bottomToolbar #redoBtn {
    width: 80px !important;
    height: 80px !important;
  }
  
  #bottomToolbar #undoBtn svg, 
  #bottomToolbar #redoBtn svg {
    width: 40px !important;
    height: 40px !important;
  }
  
  /* Add thought button - biggest, center, square */
  #bottomToolbar #addThoughtBtn {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    flex: 0 0 100px !important;
  }
  
  #bottomToolbar #addThoughtBtn svg {
    width: 60px !important;
    height: 60px !important;
  }
  
  /* Adjust canvas for mobile UI */
  #canvas {
    padding-top: 140px !important;
    padding-bottom: 160px !important;
  }
  
  /* Mobile dropdown positioning - show above button with higher z-index */
  #bottomToolbar .dropdown .dropdown-content,
  #bottomToolbar .dropdown .dropdown-content.show {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    z-index: 200 !important; /* Higher than home button */
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    /* Override inline styles that force it below */
    inset: auto auto 100% 0 !important;
  }
  
  /* Override any general dropdown positioning for mobile */
  @media (max-width: 768px) {
    .dropdown-content {
      top: auto !important;
      bottom: 100% !important;
      margin-top: 0 !important;
      margin-bottom: 10px !important;
      /* Override inline inset styles */
      inset: auto auto 100% 0 !important;
    }
    
    /* Specifically target bottomToolbar dropdowns */
    #bottomToolbar .dropdown-content {
      inset: auto auto 100% 0 !important;
      top: auto !important;
      bottom: 100% !important;
    }
  }
  
  /* Ensure dropdowns have proper z-index */
  #bottomToolbar .dropdown {
    z-index: 200 !important;
    position: relative !important;
  }
}

/* Override mobile home button styles for published courses */
.home-btn.published-course-home {
  position: fixed !important;
  left: 20px !important;
  bottom: 20px !important;
  top: auto !important;
  transform: none !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  background: #333 !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  z-index: 10010 !important;
}

.home-btn.published-course-home svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
}

/* Drag and drop overlay for canvas */
#canvas.drag-overlay {
  position: relative;
}

#canvas.drag-overlay::before {
  content: '';
  position: fixed;
  top: 20px; /* Same margin as bottom */
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 4px dashed rgba(255, 255, 255, 0.8);
  z-index: 50; /* Below toolbar (toolbar is z-index 100) */
  pointer-events: none;
  border-radius: 8px;
}

#canvas.drag-overlay::after {
  content: 'Drop files here';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 51;
  white-space: pre;
  text-align: center;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3csvg width='113' height='100' viewBox='0 0 113 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M42.6578 2.03456L2.94077 12.2108C1.87077 12.4849 1.2256 13.5746 1.49976 14.6446L22.5968 96.9848C22.8709 98.0548 23.9606 98.7 25.0306 98.4258L53.5 91.1315M42.6578 2.03456L48.9869 26.7366C49.2611 27.8066 50.3508 28.4518 51.4208 28.1776L72.7323 22.7172M42.6578 2.03456L57.6951 12.3759M72.7323 22.7172L87.5003 80.3554C87.7744 81.4254 87.1293 82.5151 86.0592 82.7892L53.5 91.1315M72.7323 22.7172L57.6951 12.3759M53.5 91.1315L53.5 96.9222C53.5 98.0268 54.3954 98.9222 55.5 98.9222L109.5 98.9223C110.605 98.9223 111.5 98.0268 111.5 96.9223L111.5 36M38 34.5L42 48.25M46 62L42 48.25M42 48.25L56.5 44L30 52M57.6951 12.3759L93 12.5933M93 12.5933L111.5 36M93 12.5933L93 34C93 35.1046 93.8954 36 95 36L111.5 36' stroke='white' stroke-width='2'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: calc(50% - 5px) 0;
  background-size: 113px 100px;
  padding-top: 120px;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.form-option-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #007bff;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

#usv-tb {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  height: 51px;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 12px;
  font-size: 12px;
  color: white;
}

#send-reprimands-container,
#send-message-container {
  background: rgb(34, 34, 34);
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  height: calc(100% - 16px);
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  flex-direction: row;
  align-items: center;
}

#usv-tb img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #666;
}

#usv-tb button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.2s;
}

#usv-tb button:hover {
  transform: scale(1.1);
}

#usv-tb button:active {
  transform: scale(0.95);
}

#reprimand-item {
  background: rgb(34, 34, 34);
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  
  height: calc(100% - 16px);
  aspect-ratio: 1 / 1;
  padding: 8px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#user-ownership-tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  background: rgb(34, 34, 34);
  border: 1px solid #444;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  height: calc(100% - 16px);
  padding: 8px 12px;
}

#userinfo-ot {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Course Publish Review Modal */
#coursePublishReviewModal .modal-content h3 {
  color: #888;
  font-weight: normal;
  margin-bottom: 20px;
}

#reviewThumbnail {
  max-width: 200px;
  max-height: 100px;
  border-radius: 0;
  display: block;
  margin-bottom: 15px;
}

#publishReviewContent {
  text-align: left;
}

#confirmPublishBtn {
  float: right;
  margin-top: 20px;
}

/* Course Publish Progress Modal */
#publishProgressBar {
  border-radius: 0;
}

/* Hide mindmapDirectory on mobile (except for published courses) */
@media (max-width: 768px) {
  body:not(.published-course) #mindmapDirectory {
    display: none !important;
  }
}