.at-drop.dragover {
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border-color: #22c55e;
  transform: translateY(-1px);
}

.at-waveform-shell {
  position: relative;
  min-height: 56px;
  border: 1px solid var(--line-strong, #cbd5e1);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface, #fff);
  touch-action: none;
}

.at-waveform {
  display: block;
  width: 100%;
  height: 56px;
}

.at-wave-selection {
  position: absolute;
  inset-block: 0;
  z-index: 2;
  border-block: 4px solid var(--brand, #2563eb);
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, transparent);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.at-wave-selection.is-dragging {
  cursor: grabbing;
}

.at-wave-handle {
  position: absolute;
  inset-block: 0;
  z-index: 3;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--brand, #2563eb);
  box-shadow: 0 2px 10px rgb(15 23 42 / 25%);
  cursor: ew-resize;
  touch-action: none;
}

.at-wave-handle-start { left: 0; }
.at-wave-handle-end { right: 0; }

.at-handle-grip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.at-handle-grip i {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 999px;
  background: rgb(255 255 255 / 90%);
}

.at-range {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.at-time-pill {
  font-variant-numeric: tabular-nums;
}

.at-progress-bar-track,
.vt-progress-bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--muted, #e5e7eb);
}

.at-progress-bar-fill,
.vt-progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand, #2563eb);
  transition: width 180ms ease;
}

.at-loading-shimmer {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 24%), transparent);
  background-size: 200% 100%;
  animation: at-shimmer 1.25s linear infinite;
}

@keyframes at-shimmer {
  to { background-position: -200% 0; }
}

.tool-section-card details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tool-section-card details > summary::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 1rem;
  flex: 0 0 auto;
  background-color: var(--ink-subtle, #94a3b8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms ease;
}

.tool-section-card details[open] > summary::after {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .at-waveform-shell,
  .at-waveform {
    height: 56px;
    min-height: 56px;
  }
}