.upload-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.upload-h1 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.upload-meta { font-size: 11px; color: var(--text-muted); }

.upload-form { display: flex; flex-direction: column; gap: 8px; }

.composer { padding: 12px 14px; }
.composer-textwrap { padding: 4px 0 8px; }
.composer-textwrap textarea {
  width: 100%; border: 0; outline: 0; resize: vertical;
  background: transparent; color: var(--text-strong);
  font: inherit; font-size: 13px; line-height: 1.55; min-height: 60px;
}
.composer-textwrap textarea::placeholder { color: rgba(255,255,255,0.4); }

.composer-actions { display: flex; align-items: center; gap: 8px; }
.composer-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border-1);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer; color: var(--text-strong); opacity: 0.85;
}
.composer-icon:hover { opacity: 1; background: var(--surface-1); }
.composer-icon-mic { color: #fca5a5; border-color: rgba(220,38,38,0.4); }
.composer-icon-mic:hover { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.6); }
.record-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }

.composer-submit { margin-left: auto; }
.composer-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* Stop button (recording state) — destructive primary, replaces submit. */
.composer-stop {
  margin-left: auto;
  background: #dc2626; color: #fff; border: 0;
  padding: 6px 14px; border-radius: 8px; font-weight: 600; font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.composer-stop:hover { background: #b91c1c; }
.stop-square { width: 8px; height: 8px; background: #fff; border-radius: 1px; }

/* Subtle text-link buttons (Cancel, Re-record). */
.composer-link {
  background: transparent; border: 0; padding: 4px 6px;
  color: var(--text-muted); font: inherit; font-size: 11px;
  cursor: pointer; text-decoration: none;
}
.composer-link:hover { color: var(--text-strong); }

/* State-driven visibility — single source of truth for which controls show. */
.composer[data-state="idle"]      [data-show-state]:not([data-show-state~="idle"]),
.composer[data-state="recording"] [data-show-state]:not([data-show-state~="recording"]),
.composer[data-state="preview"]   [data-show-state]:not([data-show-state~="preview"]) {
  display: none !important;
}

.composer-hint { font-size: 10px; opacity: 0.45; text-align: center; margin: 0; }

.upload-error { color: #fca5a5; font-size: 11px; margin: 4px 0 0; }

/* The native [hidden] attribute would normally collapse these blocks via
   the UA stylesheet's `[hidden] { display: none }` rule, but our class-level
   `display: flex` declarations have equal specificity and come later, so
   they would win. Explicit hide rules to avoid that override. */
.composer-record[hidden],
.composer-preview[hidden] { display: none; }

/* Recording state styles */
.composer-record { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.record-pulse { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.3); opacity: 0.6; } }
.record-timer { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.record-level { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; flex: 1; }
.record-level .bar { width: 2px; background: rgba(220,38,38,0.55); border-radius: 1px; transition: height 80ms linear; }

/* Preview state styles */
.composer-preview {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px 0;
}

/* Custom audio player — bypasses Chrome's broken controls on header-less
   webm blobs from MediaRecorder. The hidden <audio> element handles
   playback; we drive a play/pause button and a progress fill from its
   timeupdate/ended events, using the wall-clock duration we recorded. */
.mini-player {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: 999px;
  padding: 6px 12px 6px 6px;
}
.mini-player-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--text-strong); color: var(--bg-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer;
  flex-shrink: 0;
}
.mini-player-btn:hover { opacity: 0.85; }
.mini-player-track {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.mini-player-fill {
  height: 100%; width: 0%;
  background: var(--text-strong);
  transition: width 120ms linear;
}
.mini-player-time {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.preview-meta {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-left: 4px;
}

/* The hidden <audio> backing the mini-player. Use clip-path rather than
   display:none — some browsers skip src loading on display:none audio
   elements that have no `controls`. width:0/height:0 keeps it loadable
   while invisible. */
.composer-preview-audio {
  position: absolute; width: 0; height: 0; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* Recent strip */
.recent-strip { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.recent-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.recent-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 12px;
  text-decoration: none; color: var(--text-strong);
}
.recent-card:hover { border-color: rgba(198,168,115,0.35); }
.recent-card-head { display: flex; justify-content: space-between; align-items: center; }
.recent-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; opacity: 0.85;
}
.recent-title { font-size: 11px; font-weight: 600; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.recent-meta { font-size: 10px; color: var(--text-faint); }
.recent-empty {
  background: var(--surface-1);
  border: 1px dashed var(--border-1);
  border-radius: var(--radius-md);
  padding: 18px; text-align: center;
  color: var(--text-muted); font-size: 11px;
}

@media (max-width: 960px) { .recent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .recent-grid { grid-template-columns: 1fr; } .composer-actions { flex-wrap: wrap; } }