::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-actions button {
  position: relative;
}

.quick-actions .quick-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 9px;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.quick-actions .quick-tip::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #111;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.quick-actions .quick-tip:hover::after,
.quick-actions .quick-tip:hover::before,
.quick-actions .quick-tip:focus-visible::after,
.quick-actions .quick-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

#editor .md-editor {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin: 0;
  max-width: none;
}

.editor-host .md-editor {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.markdown-link-strip {
  text-align: left;
}

.markdown-link {
  display: inline-block;
  font-weight: 700;
  animation: rainbow-shift 3.5s linear infinite;
}

@keyframes rainbow-shift {
  0% {
    color: #ef4444;
  }
  14.285% {
    color: #f97316;
  }
  28.57% {
    color: #eab308;
  }
  42.855% {
    color: #22c55e;
  }
  57.14% {
    color: #06b6d4;
  }
  71.425% {
    color: #3b82f6;
  }
  85.71% {
    color: #8b5cf6;
  }
  100% {
    color: #ef4444;
  }
}