.note-header {
  width: 100%;
  min-width: 0;
  overflow: visible;
  position: relative;
}

/* Full-width top gradient background layer */
.note-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px; /* covers the whole top area visually */
  background-image: var(--note-accent-gradient, none);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content renders above the gradient layer */
.note-header > * {
  position: relative;
  z-index: 1;
}

.path-wrap {
  min-width: 0;
  overflow: hidden;
}

.path-prefix {
  color: rgb(148 163 184);
  font-size: 0.85rem;
}

.path-filename {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Hover pencil visibility */
.path-filename.editable {
  cursor: pointer;
  position: relative;
}
.path-filename.editable .edit-icon { opacity: 0; }
.path-filename.editable:hover .edit-icon { opacity: 0.7; }

/* Inline edit input look */
.inline-edit {
  padding: 0 2px;
  transition: opacity 150ms ease;
}

.note-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.4rem;
  background: transparent;
  color: inherit;
  transition: background-color 120ms ease, color 120ms ease;
}

.note-header__action:hover {
  background-color: rgba(148, 163, 184, 0.15);
}

/* Accent the small round action buttons when a note color is present */
:host.has-note-color .accented-action {
  border-color: color-mix(in oklab, var(--note-accent-color) 45%, var(--border));
  background: color-mix(in oklab, var(--note-accent-color) 16%, var(--card));
  color: color-mix(in oklab, var(--note-accent-text-color, #e2e8f0) 90%, var(--text-muted));
}

:host.has-note-color .accented-action:hover,
:host.has-note-color .accented-action:focus-visible {
  background: color-mix(in oklab, var(--note-accent-color) 22%, var(--card));
  color: var(--note-accent-text-color, #e2e8f0);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--note-accent-color) 25%, transparent);
}

:host.has-note-color .accented-action svg {
  stroke: currentColor;
}