/* ── snippets ── */
.snippets { display: flex; flex-direction: column; gap: .75rem; }

.snippet-pane {
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: .6rem; overflow: hidden;
}

.pane-header {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  font-size: .82rem;
}
.pane-title  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.sel-dur     { opacity: .5; font-variant-numeric: tabular-nums; font-size: .78rem; flex-shrink: 0; }
.pane-controls { display: flex; gap: .1rem; flex-shrink: 0; }

/* ── waveform ── */
.waveform-wrap {
  position: relative; height: 72px;
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  margin-bottom: 1.5rem;
}
.waveform-canvas { width: 100%; height: 100%; display: block; }

.handle {
  position: absolute; top: 0; height: 100%; width: 16px;
  transform: translateX(-50%); cursor: ew-resize; z-index: 2;
}
.handle::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 2px; height: 100%; background: var(--accent);
}
.handle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 16px; background: var(--accent); border-radius: 3px;
}
.handle-label {
  position: absolute; top: calc(100% + 4px);
  background: var(--accent); color: var(--bg);
  font-size: .65rem; font-variant-numeric: tabular-nums;
  padding: .1rem .3rem; border-radius: .2rem; white-space: nowrap; pointer-events: none;
}
.handle-s .handle-label { left: 0; }
.handle-e .handle-label { right: 0; left: auto; }

/* ── pane footer ── */
.pane-footer {
  display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
}

.time-row {
  display: flex; align-items: center; gap: .35rem; font-size: .8rem; flex-wrap: wrap;
}
.time-row label { opacity: .5; }
.time-input {
  width: 4rem; padding: .2rem .35rem; border-radius: .3rem; font-size: .8rem;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: color-mix(in srgb, var(--fg) 6%, transparent); color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.time-input:focus { outline: none; border-color: var(--accent); }
.total-dur { opacity: .35; font-size: .75rem; font-variant-numeric: tabular-nums; }

/* ── preview bar ── */
.preview-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem .75rem; border-radius: .5rem;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}
.preview-info { opacity: .5; font-size: .82rem; font-variant-numeric: tabular-nums; }

/* ── export bar ── */
.export-bar { display: flex; flex-direction: column; gap: .65rem; }
.export-btns { display: flex; gap: .65rem; flex-wrap: wrap; }

.format-picker { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip {
  padding: .25rem .65rem; border-radius: 2rem; font-size: .78rem;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  background: transparent; color: var(--fg); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.chip:hover  { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

/* ── buttons ── */
.btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: .5rem; border: none;
  cursor: pointer; font-size: .875rem; font-weight: 500; transition: opacity .15s;
}
.btn.icon-only    { padding: .45rem .6rem; }
.btn:disabled     { opacity: .35; cursor: not-allowed; }
.btn:hover:not(:disabled) { opacity: .85; }
.btn.primary      { background: var(--accent); color: var(--bg); }
.btn.secondary    { background: color-mix(in srgb, var(--fg) 12%, transparent); color: var(--fg); }

.icon-btn {
  background: transparent; border: none; color: var(--fg); cursor: pointer;
  padding: .2rem; border-radius: .3rem; display: flex; align-items: center;
  opacity: .4; transition: opacity .15s, color .15s;
}
.icon-btn:hover        { opacity: 1; }
.icon-btn:disabled     { opacity: .15; cursor: not-allowed; }
.icon-btn.remove:hover { color: #f66; }