:root {
  --font-family: 'ABC Diatype', sans-serif;
  --base-font-size: 16px;
  --line-height: 1.5;
  --timestamp-width: 180px;
  --master-border-radius: 10px; /* Master control for all rounded corners */
  --highlight-padding: 0.25em 0.5em;
  --timestamp-color: #acacac;
  --spacing-unit: 5px;
  --search-results-spacing: 2rem;
  --fade-width: 50px;
}

@font-face {
  font-family: 'ABC Diatype';
  src: url('assets/ABCDiatype-Regular-Trial.otf') format('opentype');
}

html, body {
  margin: 10;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  line-height: var(--line-height);
}

canvas {
  display: block;
}

.search-container {
  margin-bottom: var(--search-results-spacing);
  display: flex;
  gap: 10px;
  justify-content: center;
}

input {
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--master-border-radius);
  width: 400px;
}

button {
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: var(--master-border-radius);
  cursor: pointer;
  background: #f5f5f5;
  transition: background 0.2s;
  min-width: 100px;
}

button {
  cursor: pointer;
  background: #f5f5f5;
  transition: background 0.2s;
}

button:hover {
  background: #eee;
}

#result {
  display: flex;
  flex-direction: column;
}

.result-row {
  display: flex;
  margin-bottom: var(--spacing-unit);
  min-height: 2em;
  align-items: center;
  position: relative;
}

.timestamp {
  min-width: var(--timestamp-width);
  flex-shrink: 0;
  font-weight: bold;
  color: var(--timestamp-color);
  padding-right: calc(var(--spacing-unit) * 2);
  text-align: left;
  white-space: nowrap;
  background: white;
  z-index: 3;
  position: relative;
}

.occurrence-count {
  min-width: var(--timestamp-width);
  flex-shrink: 0;
  font-weight: bold;
  color: var(--timestamp-color);
  padding-left: calc(var(--spacing-unit) * 2);
  text-align: right;
  white-space: nowrap;
  background: white;
  z-index: 3;
  position: relative;
}

.highlight {
  border-radius: var(--master-border-radius);
  padding: var(--highlight-padding);
  display: inline-block; /* This ensures padding works properly */
  line-height: 1; /* Adjust line height to prevent vertical stretching */
  margin: 0 0.1em; /* Add a small margin to prevent highlights from touching */
}

.message {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  flex-grow: 1;
  height: 2em;
  display: flex;
  align-items: center;
}

/* Message fade effects updated to include right side fade reaching occurrence count */
.message::before,
.message::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade-width);
  pointer-events: none;
  z-index: 2;
}

.message::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.message::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* Mobile styles updated */
@media (max-width: 768px) {
  .timestamp, .occurrence-count {
    display: none;
  }
  
  .result-row {
    padding-left: var(--fade-width);
  }

  .message {
    padding-left: 0 !important;
    margin-left: 0;
  }
}