/* Self-takes "Record it myself" mountable panel (R1). Minimal, reuses the
   app's own tokens rather than inventing a new palette. */

.self-record-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
}

.self-record-heading {
  font-weight: 600;
}

.self-record-progress {
  font-size: 13px;
  opacity: 0.8;
}

.self-record-error {
  color: var(--danger-color, #d33);
  font-size: 13px;
}

.self-record-mic-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.self-record-mic-select {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

.self-record-mic-refresh {
  flex: 0 0 auto;
}

.self-record-mic-empty {
  flex: 1 1 220px;
  min-width: 0;
}

.self-record-list-heading {
  font-weight: 600;
  margin-top: 4px;
}

.self-record-line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px repeat(3, 34px);
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color, #333);
}

.self-record-playback {
  display: none;
}

.self-record-action-empty {
  visibility: hidden;
}

.self-record-line-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
}

.self-record-badge {
  width: 10px;
  height: 10px;
  font-size: 0;
  border-radius: 50%;
  overflow: hidden;
}

.self-record-badge--ok {
  background: var(--success-bg, #1c3);
  color: #fff;
}

.self-record-badge--stale {
  background: var(--warning-bg, #d90);
  color: #fff;
}

.self-record-badge--missing {
  background: var(--muted-bg, #555);
  color: #fff;
}

.self-record-badge--recording {
  background: var(--danger-color, #d33);
}

.self-record-btn {
  box-sizing: border-box;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.self-record-line-row .self-record-control {
  width: 34px;
  height: 34px;
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.self-record-control svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.self-record-control--record,
.self-record-btn--stop {
  color: var(--danger-color, #d33);
}

.self-record-control--play {
  color: var(--success-color, #149f3d);
}

.self-record-btn[disabled] {
  cursor: default;
}

.self-record-btn--primary {
  font-weight: 600;
}

.self-record-btn--stop,
.self-record-btn--danger {
  color: var(--danger-color, #d33);
}

.self-record-page-line {
  font-size: 22px;
  padding: 12px 0;
}

.self-record-active {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* One script to read: the words, one Record/Stop button with its clock, then
   one plain sentence with Play and Delete beside it. */
.self-record-single {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.self-record-single-transport,
.self-record-single-status,
.self-record-single-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.self-record-single-action {
  min-width: 92px;
  min-height: 38px;
  font-size: 15px;
  font-weight: 600;
}

.self-record-single-record {
  color: var(--danger-color, #d33);
}

.self-record-single-clock {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.self-record-single-state {
  flex: 1 1 auto;
  min-width: 0;
}