/* Upload card + job progress + homepage result panel. */

.upload-box {
  padding:18px 20px 15px
}

.upload-head {
  display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); margin-bottom:12px
}

.tabs {
  display:flex; gap:22px
}

.tabs button {
  padding:0 0 13px; border:0; background:none; color:var(--muted); font-weight:700; font-size:13px
}

.tabs button.active {
  color:var(--ink); box-shadow:inset 0 -2px var(--teal)
}

.pill {
  display:inline-flex; align-items:center; gap:7px; background:#edf8f5; border:1px solid #deeee8; border-radius:30px; padding:6px 10px; font-size:11px; font-weight:700; color:#607d77; white-space:nowrap
}

.pill:before {
  content:''; width:6px; height:6px; background:var(--teal); border-radius:100%
}

/* Marketing hero: the sample transcript replaces the size pill in the card head,
   so the card keeps ending on its trust line. */
.upload-sample {
  display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:12px; color:#5e7787; white-space:nowrap; padding-bottom:11px
}

.upload-sample .cs-icon {
  width:12px; height:12px
}

.upload-sample:hover {
  color:var(--teal)
}

/* The two source tabs share a single grid cell: the card keeps the height of
   the taller panel whichever tab is open, so switching never nudges the editor
   or the hero photo. The inactive panel stays in flow but is invisible, out of
   the tab order and out of the accessibility tree. */
.upload-body {
  display: grid;
}

.upload-body > .upload-panel {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
}

.upload-body > .upload-panel.is-active {
  visibility: visible;
}

.dropzone {
  border:1.5px dashed #cbdedc; border-radius:11px; background:linear-gradient(#fcfefe,#fbfdfd); min-height:190px; padding:27px 16px; display:grid; place-content:center; justify-items:center; text-align:center; cursor:pointer; transition:background var(--speed) var(--ease),border-color var(--speed) var(--ease)
}

/* Empty state and the chosen file share one cell, so picking a file swaps the
   contents without changing the box height. */
.dropzone-empty {
  grid-area:1/1; display:flex; flex-direction:column; align-items:center
}

.dropzone.is-filled {
  border-style:solid; border-color:#cfe7df; background:#f7fcfa
}

.dropzone.is-filled .dropzone-empty {
  visibility:hidden
}

.dropzone .selected-file {
  grid-area:1/1; align-self:center; justify-self:stretch; width:100%; margin:0; text-align:left
}

.dropzone.dragging,.dropzone.dragover {
  background:#edf9f5; border-color:var(--teal)
}

.upload-symbol {
  width:42px; height:42px; border-radius:11px; background:#e9f7f3; color:var(--teal); display:grid; place-items:center; font-size:22px; margin-bottom:9px
}

.dropzone strong {
  font-size:14px
}

.dropzone .or {
  font-size:12px; color:#8fa0a9; margin:1px 0 7px
}

.dropzone small {
  color:#8295a3; font-size:11px; margin-top:7px
}

.trustline {
  display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:13px; margin-top:10px; color:#778897; font-size:11px
}

.trustline span {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap
}

.selected-file {
  display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #cfe7df; background:#f7fcfa; padding:11px 13px; margin:10px 0 0; border-radius:var(--radius-sm); font-size:12px; color:var(--teal)
}

.selected-file-copy {
  display:flex; flex-direction:column; gap:2px; min-width:0
}

.selected-file-copy strong {
  font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.selected-file-copy span {
  color:#6f8b86; font-size:11.5px
}

.icon-button {
  width:30px; height:30px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:#6d8391; flex:none
}

.icon-button:hover {
  background:#fff3f3; border-color:#f0d3d3; color:var(--danger)
}

.linkpanel {
  padding:14px 0 8px; align-self:center
}

.linkpanel-icon {
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:#eef4f8; color:#5c7a8c; margin-bottom:12px
}

.linkpanel input {
  width:100%; height:48px; border:1px solid #d7e3e5; border-radius:9px; padding:12px
}

.linkpanel p {
  margin:9px 0 0; color:var(--muted); font-size:12px
}

.upload-options {
  display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:14px; padding-top:14px; flex-wrap:wrap
}

.upload-options-fields {
  display:flex; gap:10px; flex-wrap:wrap; flex:1
}

.upload-options .select {
  flex:1; min-width:150px
}

.upload-submit {
  margin-top:11px
}

.tool-message {
  margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--danger); background:var(--danger-soft); border:1px solid #f2d9d9; border-radius:var(--radius-sm); padding:10px 12px
}

.tool-message.info {
  color:#486d67; background:#f2faf8; border-color:#d8ece7
}

.tool-message.error {
  color:var(--danger)
}

.job-progress {
  margin-top:14px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-md); background:#fbfdfd
}

.job-progress-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; font-weight:700; color:var(--ink)
}

.job-progress-head strong {
  color:var(--teal); font-variant-numeric:tabular-nums
}

.progress-track {
  height:6px; margin-top:10px; border-radius:20px; background:#e4edee; overflow:hidden
}

.progress-track i {
  display:block; height:100%; width:0; border-radius:20px; background:var(--teal); transition:width .25s var(--ease)
}

.job-progress-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:9px; font-size:11.5px; color:var(--muted)
}

.job-progress-foot .text-button {
  font-size:11.5px; color:#6d8391
}

.job-progress-foot .text-button:hover {
  color:var(--danger)
}

/* ---- Homepage result preview ---- */

.transcript-result {
  margin-top:16px; padding:20px 22px 16px
}

.result-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:6px
}

.result-head h3 {
  font-size:19px; margin:4px 0 0
}

.result-actions {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap
}

.result-actions .btn {
  padding:8px 11px
}

.transcript-lines {
  display:block
}

.transcript-lines .transcript-line {
  display:grid; grid-template-columns:48px 92px minmax(0,1fr); gap:11px; align-items:start; padding:12px 2px; border-bottom:1px solid #eef2f4; font-size:13px; line-height:1.65
}

.transcript-lines .transcript-line:last-child {
  border-bottom:0
}

.transcript-lines .speaker {
  font-size:12px; font-weight:800; color:#1769e8
}

.transcript-lines .transcript-line:nth-child(even) .speaker {
  color:var(--teal)
}

.transcript-lines p {
  margin:0; color:var(--text)
}

.transcript-lines mark {
  background:#e6ec99; color:#46524a; border-radius:2px; padding:0 2px
}

.result-note {
  margin:12px 0 0; padding-top:11px; border-top:1px solid var(--line)
}

.app-upload .dropzone {
  min-height:245px
}

.app-upload .upload-head {
  margin-top:0
}

.app-upload .upload-box {
  border:0; box-shadow:none; border-radius:0; padding:0; background:transparent
}

@media(max-width:780px) {
  .trustline {
    flex-wrap:wrap
  }
  .transcript-lines .transcript-line {
    grid-template-columns:42px 1fr; gap:4px 9px
  }
  .transcript-lines .speaker {
    grid-column:2
  }
  .transcript-lines p {
    grid-column:2
  }
  .result-actions {
    width:100%
  }
  .result-actions .cs-search-field {
    flex:1
  }
}

/* ---- Multi-file queue ----------------------------------------------------
   Replaces the single .selected-file strip: the queue is the only place a
   chosen file appears, so empty → one file → many files all share one layout.
   Capped height keeps a 20-file drop from pushing the submit button off-screen. */
.upload-queue {
  grid-area:1/1; align-self:center; justify-self:stretch; width:100%; text-align:left; max-height:232px; overflow-y:auto
}

.queue-list {
  display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none
}

.queue-item {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px;
  border:1px solid #cfe7df; border-radius:var(--radius-sm); background:#f7fcfa; font-size:12px; color:var(--teal)
}

.queue-copy {
  display:flex; flex-direction:column; gap:2px; min-width:0
}

.queue-name {
  font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

a.queue-name:hover {
  color:var(--teal); text-decoration:underline
}

.queue-meta {
  color:#6f8b86; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.queue-item[data-state="done"] {
  border-color:#c6e9da; background:#f1fbf6
}

.queue-item[data-state="done"] .queue-meta {
  color:#2f7a63
}

.queue-item[data-state="failed"] {
  border-color:#f2d9d9; background:#fdf6f6
}

.queue-item[data-state="failed"] .queue-meta {
  color:var(--danger)
}

.queue-item[data-state="canceled"] .queue-meta {
  color:#9aa7ae
}

.queue-item .icon-button {
  flex:none
}

.upload-hotwords {
  flex:1 1 160px; min-width:150px; height:38px; padding:0 12px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; font:inherit; font-size:12.5px; color:var(--text)
}

.upload-hotwords:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px
}

.upload-hotwords::placeholder {
  color:#9fb0ba
}