.speaker-a {
  color:#1769e8; font-weight:800
}

.speaker-b {
  color:var(--teal); font-weight:800
}

.app-shell {
  display:flex; min-height:100vh; background:#fff
}

.app-sidebar {
  width:250px; flex-shrink:0; border-right:1px solid var(--line); background:#fff; padding:24px 23px 23px; display:flex; flex-direction:column; gap:5px; position:sticky; top:0; height:100vh
}

.app-sidebar .btn {
  margin-bottom:20px; width:100%; padding:13px 8px
}

.app-nav {
  display:flex; flex-direction:column; gap:2px
}

.app-nav a {
  padding:12px 13px; border-radius:10px; font-size:14px; font-weight:650; color:#34495b; display:flex; gap:12px; align-items:center
}

.app-nav a.active {
  background:#e9f7f3; color:var(--teal)
}

.app-nav a:hover {
  background:#f0f7f7
}

.app-spacer {
  flex:1
}

.usage-meter {
  border-bottom:1px solid var(--line); padding:10px 8px 20px; color:#7c8f9c; font-size:12px
}

.usage-meter strong {
  display:block; margin-top:2px; color:var(--ink); font-size:13px; font-weight:700
}

.usage-meter small {
  display:block; margin-top:2px
}

.meter {
  height:7px; background:#e5ecef; border-radius:20px; overflow:hidden; margin-top:8px
}

.meter i {
  display:block; width:43.3%; height:100%; background:var(--teal); border-radius:20px
}

.avatar-row {
  display:flex; align-items:center; gap:10px; margin-top:20px; font-size:13px
}

.avatar-row small {
  display:block
}

.avatar-chevron {
  margin-left:auto; color:#9aabb5; display:inline-flex
}

.avatar {
  border-radius:50%; width:39px; height:39px; background:#ddeaff; color:#254b85; display:grid; place-items:center; font-weight:800; flex:none
}

.app-content {
  flex:1; min-width:0; display:flex; flex-direction:column; background:#f8fafb
}

.app-main {
  flex:1; min-width:0; padding:42px clamp(24px,3vw,55px) 70px
}

.app-wrap {
  max-width:1280px; margin:0 auto
}

.app-page-title {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:28px
}

.app-page-title h1 {
  font-size:40px; margin:4px 0 8px
}

.app-page-title p {
  color:#8193a0; font-size:16px; margin:0
}

.app-grid {
  display:grid; grid-template-columns:1.6fr 1fr; gap:18px
}

.app-card {
  background:#fff; border:1px solid #e4ebed; border-radius:14px; padding:23px 25px
}

.app-card h2 {
  font-size:20px; margin:0 0 8px
}

.app-card p {
  color:#8295a3
}

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

.guide {
  background:#f6fcfb; position:relative
}

.guide h2 {
  margin-bottom:25px
}

.guide-step {
  display:flex; align-items:start; gap:15px; margin-bottom:25px
}

.step-bubble {
  width:35px; height:35px; border-radius:50%; background:#dff4ee; color:var(--teal); display:grid; place-items:center; flex-shrink:0; font-weight:800
}

.guide-step strong {
  display:block; font-size:14px
}

.guide-step p {
  font-size:13px; margin:3px 0
}

.app-section-head {
  display:flex; align-items:center; justify-content:space-between; margin:30px 0 15px
}

.app-section-head h2 {
  margin:0; font-size:21px
}

.data-table {
  background:white; border:1px solid var(--line); border-radius:14px; overflow:hidden
}

.table-row {
  display:grid; grid-template-columns:minmax(245px,2fr) 90px 105px 116px 100px 55px; gap:12px; align-items:center; border-bottom:1px solid #e6edef; padding:15px 20px; font-size:13px
}

.table-row:last-child {
  border:0
}

.table-row.header {
  background:#f9fbfc; color:#8294a0; font-size:12px; font-weight:800
}

.table-row:not(.header):hover {
  background:#f8fcfb
}

.file-name {
  display:flex; align-items:center; gap:14px; font-weight:800
}

.file-name small {
  display:block; margin-top:2px; font-weight:500; color:#94a5b0
}

.status .cs-icon {
  width:13px; height:13px
}

.file-glyph {
  background:#eaf1ff; color:#1769e8; display:grid; place-items:center; width:39px; height:39px; border-radius:9px; font-size:19px
}

.status {
  border-radius:8px; background:#e5f8f1; color:#078269; padding:6px 10px; font-size:12px; font-weight:800; white-space:nowrap
}

.filters {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:19px
}

.filters button {
  border:0; background:transparent; padding:9px 12px; color:#7f91a0; font-weight:700
}

.filters button.active {
  border-bottom:2px solid var(--teal); color:var(--ink)
}

.filters input {
  margin-left:auto; min-width:240px
}

.detail-cols {
  display:grid; grid-template-columns:34% 1fr; gap:16px
}

.detail-cols>* {
  min-width:0
}

.audio-player {
  padding-bottom:21px
}

.audio-player .wave {
  height:100px; overflow:hidden
}

.audio-controls {
  display:flex; align-items:center; justify-content:space-between; padding-top:15px
}

.audio-controls .playbtn {
  width:50px; height:50px; font-size:20px
}

.speaker-list {
  margin-top:12px
}

.speaker-line {
  display:flex; gap:12px; align-items:center; padding:11px 0
}

.speaker-icon {
  width:40px; height:40px; display:grid; place-items:center; background:#e3f5f1; color:var(--teal); border-radius:11px; font-weight:800
}

.speaker-icon.blue {
  background:#e7f0ff; color:#1769e8
}

.transcript-panel {
  padding:0; overflow:hidden
}

.transcript-toolbar {
  display:flex; justify-content:space-between; align-items:center; padding:21px 25px; border-bottom:1px solid var(--line); gap:15px; flex-wrap:wrap
}

/* Three view modes plus search plus edit is more than a narrow transcript
   panel can hold on one row. Keep the controls as a single unit so they drop
   together under the title instead of leaving one button stranded.
   max-width guards the no-shrink basis from overflowing on a phone. */
.toolbar-actions {
  flex:0 0 auto; max-width:100%; margin-left:auto
}

.transcript-toolbar h2 {
  margin:0
}

.transcript-line {
  /* relative so a memo pin can sit in the right gutter without adding a grid cell */
  position:relative;
  display:grid; grid-template-columns:58px 90px minmax(0,1fr); gap:13px; align-items:start; padding:18px 25px; font-size:14px; line-height:1.7; cursor:pointer
}

.transcript-line:hover,.transcript-line.selected {
  background:#eaf7f5
}

.transcript-line p {
  color:#34485a; font-size:14px; margin:0
}

.transcript-line .stamp {
  font-size:12px
}

.app-search {
  border:1px solid #dce7eb; border-radius:9px; padding:12px 14px; background:#f9fbfc; font-size:13px; min-width:260px
}

.kpi-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:15px
}

.kpi {
  padding:17px; border:1px solid var(--line); border-radius:12px
}

.kpi strong {
  font-size:26px; display:block
}

.kpi span {
  color:#8d9fa9; font-size:13px
}

.app-account-grid {
  display:grid; grid-template-columns:1.25fr 1fr; gap:17px
}

.account-meta {
  display:flex; align-items:center; gap:22px
}

.account-meta .avatar {
  width:70px; height:70px; font-size:26px
}

.pref-row {
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; border-top:1px solid var(--line)
}

.pref-row strong {
  display:block; font-size:14px
}

.pref-row span {
  color:#8295a3; font-size:13px
}

.switch {
  border:0; background:#cfd9df; width:48px; height:26px; border-radius:20px; padding:3px; position:relative; flex-shrink:0
}

.switch:before {
  content:''; display:block; width:20px; height:20px; background:white; border-radius:50%; transition:transform .2s
}

.switch.on {
  background:var(--teal)
}

.switch.on:before {
  transform:translateX(22px)
}

.empty-state {
  text-align:center; padding:90px 24px; color:#8497a4
}

.empty-state .symbol {
  font-size:50px; color:#87b2aa
}

.empty-state h3 {
  margin:10px 0 6px; color:var(--ink)
}

.empty-state p {
  font-size:13px; margin:0 0 16px
}

.mobile-nav {
  display:none
}

/* ---- Detail page ---- */

.breadcrumb {
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; max-width:100%; font-size:12.5px; font-weight:600; color:#8ba0ad
}

.breadcrumb span {
  color:#c3ced5
}

.breadcrumb:hover {
  color:var(--teal)
}

.transcript-title .detail-actions {
  display:flex; gap:9px; flex-wrap:wrap
}

.state-banner {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; margin-bottom:18px; padding:14px 17px; border:1px solid var(--line); border-radius:12px; font-size:13px
}

.state-banner strong {
  display:block; font-size:13.5px; margin-bottom:2px
}

.state-banner span {
  font-size:12.5px; line-height:1.5
}

.state-banner.info {
  background:#f2faf8; border-color:#d8ece7; color:#3d6a61
}

.state-banner.error {
  background:var(--danger-soft); border-color:#f2d9d9; color:var(--danger)
}

.state-banner .progress-track {
  width:140px; margin:0
}

.audio-box {
  margin-top:12px; padding:15px 16px; border:1px solid #e2efeb; border-radius:12px; background:#f7fbfa
}

.audio-box .wave {
  height:70px; display:flex; align-items:center; gap:2px; overflow:hidden
}

.audio-box .wave i {
  width:3px; flex:none; background:#a9d8d0; border-radius:2px
}

.audio-box .wave i:nth-child(3n) {
  background:var(--teal)
}

.audio-scrub {
  width:100%; height:4px; margin:12px 0 4px; border-radius:20px; background:#d9e7e4; appearance:none; accent-color:var(--teal)
}

.audio-scrub::-webkit-slider-thumb {
  appearance:none; width:14px; height:14px; border-radius:50%; background:var(--teal); border:2px solid #fff; box-shadow:0 1px 4px #0b3a3350
}

.audio-scrub::-moz-range-thumb {
  width:12px; height:12px; border-radius:50%; background:var(--teal); border:2px solid #fff
}

.audio-note {
  margin:8px 0 0; text-align:center
}

.playbtn {
  display:inline-grid; place-items:center
}

.playbtn .glyph-play,.playbtn .glyph-pause {
  display:inline-flex
}

.playbtn .glyph-pause {
  display:none
}

.playbtn[aria-pressed="true"] .glyph-play {
  display:none
}

.playbtn[aria-pressed="true"] .glyph-pause {
  display:inline-flex
}

.audio-missing {
  display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:12px; padding:26px 20px; border:1px dashed #dbe5e8; border-radius:12px; color:#8b9da8; text-align:center
}

/* The mic is a tall, narrow glyph, so it reads smaller than the old music note
   at the default 19px. Give the empty state a bit more presence. */
.audio-missing .cs-icon {
  width:26px; height:26px
}

.audio-missing p {
  margin:0; font-size:12.5px; color:#8b9da8
}

.recording-details {
  margin:10px 0 0
}

.recording-details>div {
  display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:9px 0; border-bottom:1px solid #eef2f4; font-size:12.5px
}

.recording-details>div:last-child {
  border-bottom:0
}

.recording-details dt {
  color:#8b9da8; flex:none
}

.recording-details dd {
  margin:0; color:var(--text); font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.transcript-line.playing {
  background:#eaf7f5
}

.transcript-line:focus-visible {
  outline:3px solid var(--focus); outline-offset:-3px
}

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

.transcript-panel .empty-state {
  padding:60px 24px
}

.toolbar-actions {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap
}

.cs-search-field .app-search {
  border:0; background:transparent; padding:0; min-width:0; height:auto; font-size:13px
}

.edit-bar {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:11px 25px; background:#fffdf3; border-bottom:1px solid #f0e6c8; color:#8a6f2c; font-size:12px
}

.edit-bar>div {
  display:flex; gap:8px
}

.transcript-panel.editing .transcript-line p {
  padding:7px 10px; border:1px solid #eadfb9; border-radius:8px; background:#fff; outline:none
}

.transcript-panel.editing .transcript-line p:focus {
  box-shadow:0 0 0 3px #f3ecd2; border-color:#ddc98f
}

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

.speaker-green {
  color:var(--teal)
}

.speaker-amber {
  color:#a9741a
}

.speaker-violet {
  color:#6b4bc4
}

.speaker-slate {
  color:#5a7285
}

.speaker-icon.green {
  background:#e3f5f1; color:var(--teal)
}

.speaker-icon.amber {
  background:#fdf3e0; color:#a9741a
}

.speaker-icon.violet {
  background:#f0eaff; color:#6b4bc4
}

.speaker-icon.slate {
  background:#eef2f5; color:#5a7285
}

/* ---- Library table ---- */

.table-panel {
  padding-top:15px
}

.table-panel .filters {
  padding:0 20px
}

.filters button.active {
  border-bottom:2px solid var(--teal); color:var(--ink)
}

.filter-tab {
  padding:9px 2px 8px; margin-right:18px; border-bottom:2px solid transparent; color:#7f91a0; font-size:13px; font-weight:700
}

.filter-tab.active {
  color:var(--ink); border-color:var(--teal)
}

.filter-tab:hover {
  color:var(--teal)
}

.filters-right {
  display:flex; align-items:center; gap:9px; margin-left:auto; flex-wrap:wrap
}

.filters-right .select {
  height:38px
}

.table-foot {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 20px; border-top:1px solid #e6edef
}

.fav-button {
  width:32px; height:32px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:#fff; color:#b3c1c9
}

.fav-button .fav-on {
  display:none
}

.fav-button:hover {
  color:var(--gold); border-color:#eadfb9; background:#fffdf5
}

.fav-button.on {
  color:var(--gold); border-color:#eadfb9; background:#fffdf5
}

.fav-button.on .fav-off {
  display:none
}

.fav-button.on .fav-on {
  display:inline-flex
}

.fav-button:disabled {
  opacity:.6
}

.row-arrow {
  display:inline-flex; justify-content:flex-end; color:#bcccd4
}

.table-row:hover .row-arrow {
  color:var(--teal)
}

.file-glyph.video {
  background:#f3ecff; color:#7b4fd0
}

.status-succeeded {
  background:#e5f8f1; color:#078269
}

.status-failed {
  background:#fdeeee; color:#b54343
}

.status-canceled {
  background:#f1f3f5; color:#6d7d88
}

.status-running,.status-queued {
  background:#fff7e8; color:#8a5a12
}

/* ---- Account & settings ---- */

.account-meta {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap
}

.account-meta .avatar {
  width:66px; height:66px; font-size:24px
}

.account-meta-copy {
  flex:1; min-width:220px
}

.account-meta-copy h2 {
  font-size:22px; margin:0 0 6px
}

.account-meta-copy p {
  margin:0 0 10px; font-size:13px; max-width:560px
}

.usage-figure {
  margin:14px 0 8px; color:var(--ink); font-size:44px; font-weight:800; line-height:1; letter-spacing:-.04em
}

.usage-figure span {
  font-size:13px; font-weight:700; letter-spacing:0; color:var(--muted)
}

.cs-benefit {
  gap:10px
}

.cs-benefit .cs-icon {
  color:var(--teal)
}

.settings-card {
  margin-bottom:16px
}

.settings-card>p:first-of-type {
  margin-top:-4px
}

.settings-card .pref-row:first-of-type {
  margin-top:6px
}

.pref-static {
  color:#5f7280; font-size:13px; font-weight:700
}

.pref-row select {
  min-width:180px
}

.settings-actions {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px
}

.settings-actions .note {
  margin:0
}

/* ---- Shared small pieces ---- */

.guide-rule {
  border:0; border-top:1px solid var(--line); margin:4px 0 18px
}

.workspace-note {
  margin:16px 0 0
}

/* The toolbar carries four controls now. Let the search field give up width
   before the row wraps, so the toolbar stays a single row further down. */
@media(max-width:1400px) {
  .toolbar-actions {
    gap:8px
  }
  .toolbar-actions .cs-search-field {
    flex:1 1 150px; min-width:0
  }
  .seg-toggle button {
    padding:5px 8px
  }
}

@media(max-width:1150px) {
  .app-grid,.app-account-grid {
    grid-template-columns:1fr
  }
  .table-row {
    grid-template-columns:minmax(160px,2fr) 80px 100px 100px
  }
  .table-row>*:nth-child(n+5) {
    display:none
  }
  .detail-cols {
    grid-template-columns:clamp(240px,30%,330px) minmax(0,1fr)
  }
  .detail-col-side .app-card {
    padding:18px 16px
  }
  .transcript-toolbar {
    padding:16px 18px; gap:12px
  }
  .transcript-toolbar h2 {
    font-size:15px
  }
  .transcript-line {
    padding:16px 18px
  }
}

/* The 250px sidebar costs a third of the window below ~1024; the app falls
   back to the compact top nav there so the content column keeps its width. */
@media(max-width:1024px) {
  .app-sidebar {
    display:none
  }
  .mobile-nav {
    display:flex; background:#fff; border-bottom:1px solid var(--line); padding:12px 15px; gap:11px; overflow-x:auto; white-space:nowrap;
    scrollbar-width:none
  }
  .mobile-nav::-webkit-scrollbar {
    display:none
  }
  .mobile-nav a {
    padding:8px 12px; font-size:12px; border-radius:8px; background:#f6f9fa
  }
  .mobile-nav a.active {
    background:#e9f7f3; color:var(--teal)
  }
  .app-main {
    padding:32px 22px 56px
  }
}

@media(max-width:780px) {
  .app-main {
    padding:27px 17px 50px
  }
  .app-page-title {
    flex-wrap:wrap
  }
  .app-page-title h1 {
    font-size:31px
  }
  .app-options {
    flex-direction:column; align-items:stretch
  }
  .table-row.header {
    display:none
  }
  .table-row:not(.header) {
    display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; padding:14px 15px
  }
  .table-row:not(.header)>* {
    display:revert
  }
  .table-row .file-name {
    flex:1 1 100%
  }
  .table-row .row-arrow {
    display:none
  }
  .table-row .fav-button {
    margin-left:auto
  }
  .transcript-toolbar {
    flex-wrap:wrap
  }
  .transcript-line {
    grid-template-columns:44px 70px 1fr; gap:7px; padding:14px 13px
  }
  .app-search {
    min-width:0; width:100%
  }
  .kpi-grid {
    grid-template-columns:1fr 1fr
  }
  .detail-cols {
    grid-template-columns:1fr
  }
  .audio-box .wave i {
    width:2px
  }
  .state-banner {
    grid-template-columns:auto minmax(0,1fr)
  }
  .state-banner .progress-track {
    grid-column:1/-1; width:100%
  }
  .filters {
    padding:0 14px
  }
  .filters-right {
    width:100%; margin-left:0; flex-direction:column; align-items:stretch
  }
  .filters-right .cs-search-field,
  .filters-right .select {
    width:100%
  }
  .filter-tab {
    white-space:nowrap; margin-right:14px
  }
  .table-panel .filters {
    padding:0 14px
  }
  .table-foot {
    padding:12px 14px; flex-wrap:wrap
  }
  .settings-actions {
    flex-direction:column; align-items:stretch
  }
  .settings-actions .btn {
    justify-content:center
  }
  .pref-row {
    flex-wrap:wrap; gap:10px
  }
  .transcript-note {
    padding:12px 13px 16px
  }
  .edit-bar {
    padding:10px 13px
  }
}


/* Workspace-scoped error page (missing transcript, unknown /app path) */
.workspace-error {
  padding:34px 0 72px
}

.workspace-error-card {
  max-width:620px; margin:0 auto; padding:44px 40px 40px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow)
}

.workspace-error-code {
  font-size:64px; font-weight:800; line-height:1; letter-spacing:-.05em; color:var(--pale-strong)
}

.workspace-error-card h1 {
  font-size:var(--text-3xl); margin:12px 0 12px
}

.workspace-error-card p {
  color:var(--muted); font-size:var(--text-base); margin:0 0 26px
}

.workspace-error-card .error-actions {
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap
}

@media(max-width:780px) {
  .workspace-error {
    padding:18px 0 48px
  }
  .workspace-error-card {
    padding:30px 20px 28px
  }
  .workspace-error-code {
    font-size:48px
  }
  .workspace-error-card h1 {
    font-size:24px
  }
  .workspace-error-card .error-actions .btn {
    width:100%; justify-content:center
  }
}


/* ---- Speaker renaming ---- */

.speaker-hint {
  margin:0 0 4px; color:#8fa2ae
}

.speaker-meta {
  flex:1; min-width:0
}

.speaker-meta strong {
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.speaker-edit {
  position:relative; margin-left:auto; width:28px; height:28px; padding:0; flex:none; display:grid; place-items:center;
  border:1px solid transparent; border-radius:8px; background:transparent; color:#aebdc6; cursor:pointer
}

.speaker-edit .cs-icon {
  width:15px; height:15px
}

.speaker-edit:hover {
  background:#f1f9f7; border-color:#e0efeb; color:var(--teal)
}

.speaker-edit:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px
}

.speaker-btn {
  font-family:inherit; text-align:left; background:none; border:0; padding:0; cursor:pointer;
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-radius:5px
}

.speaker-btn:hover {
  text-decoration:underline; text-underline-offset:2px
}

.speaker-btn:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px
}

.speaker-pop {
  position:fixed; z-index:90; top:0; left:0; width:320px; max-width:calc(100vw - 24px);
  padding:16px 16px 14px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 48px #061f2f26, 0 2px 6px #061f2f14
}

.speaker-pop-form {
  display:flex; flex-direction:column; gap:9px
}

.speaker-pop-title {
  font-size:14px; font-weight:800; color:var(--ink)
}

.speaker-pop-note {
  margin:0; color:#8295a3
}

.speaker-pop-input {
  width:100%; border:1px solid #dce7eb; border-radius:9px; padding:10px 12px; font-family:inherit;
  font-size:14px; background:#f9fbfc
}

.speaker-pop-input:focus {
  outline:none; border-color:var(--teal); background:#fff; box-shadow:0 0 0 3px #dff3ee
}

.speaker-pop-scope {
  display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:#5f7280
}

.speaker-pop-scope[hidden] {
  display:none
}

.speaker-pop-scope label {
  display:flex; align-items:center; gap:8px; cursor:pointer
}

.speaker-pop-scope input {
  accent-color:var(--teal); margin:0
}

.speaker-pop-actions {
  display:flex; align-items:center; gap:8px; margin-top:2px
}

.speaker-pop-spacer {
  flex:1
}

/* ---- Trash view ---- */

.data-table.is-trash .table-row.trash-row {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 20px
}

.trash-row .file-name {
  flex:1 1 300px; min-width:0; font-weight:700
}

.trash-row .trash-name {
  display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap
}

.trash-row .trash-name small {
  display:block; margin-top:2px; font-weight:500; color:#94a5b0
}

.trash-row .trash-actions {
  display:flex; align-items:center; gap:8px; flex-shrink:0
}

.detail-hazard p {
  margin:0 0 12px; font-size:12.5px
}

.detail-hazard .btn {
  width:100%; justify-content:center
}

body.modal-open {
  overflow:hidden
}

@media(max-width:780px) {
  .data-table.is-trash .table-row.trash-row {
    display:flex; flex-wrap:wrap; padding:15px
  }
  .trash-row .file-name {
    flex:1 1 100%
  }
  .trash-row .trash-actions {
    width:100%;
  }
  .trash-row .trash-actions .btn {
    flex:1; justify-content:center
  }
  .speaker-pop {
    width:calc(100vw - 24px)
  }
}

/* ---- Detail page: the transcript scrolls, the page does not ----
   Only when there is room for two columns and a usable body height.
   Everything else keeps the plain document scroll. */

@media (min-width:781px) and (min-height:620px) {
  body.detail-body {
    height:100dvh; overflow:hidden
  }
  body.detail-body .app-shell {
    height:100dvh; min-height:0
  }
  body.detail-body .app-sidebar {
    height:100dvh; overflow-y:auto
  }
  body.detail-body .app-content {
    min-height:0
  }
  body.detail-body .app-main {
    display:flex; min-height:0; overflow:hidden; padding:26px clamp(24px,3vw,55px) 16px
  }
  body.detail-body .app-wrap {
    display:flex; flex-direction:column; width:100%; min-height:0
  }
  body.detail-body .app-page-title,
  body.detail-body .state-banner,
  body.detail-body .workspace-note {
    flex:none
  }
  body.detail-body .detail-cols {
    flex:1 1 auto; min-height:0; align-items:stretch; grid-template-rows:minmax(0,1fr)
  }
  body.detail-body .detail-col-side {
    min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px
  }
  body.detail-body .transcript-panel {
    display:flex; flex-direction:column; min-height:0
  }
  body.detail-body .transcript-toolbar,
  body.detail-body .edit-bar,
  body.detail-body .transcript-note,
  body.detail-body .transcript-panel > .empty-state {
    flex:none
  }
  body.detail-body .transcript-lines {
    position:relative; flex:1 1 auto; min-height:180px; overflow-y:auto; overscroll-behavior:contain
  }
}

/* ---- Title rename -------------------------------------------------------- */
.title-row {
  display:flex; align-items:center; gap:8px; min-width:0
}

.title-row h1 {
  margin:0; min-width:0
}

.title-edit {
  width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0;
  border:1px solid transparent; border-radius:8px; background:transparent; color:#aebdc6; cursor:pointer
}

.title-edit .cs-icon {
  width:15px; height:15px
}

.title-edit:hover {
  background:#f1f9f7; border-color:#e0efeb; color:var(--teal)
}

.title-edit:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px
}

.title-form {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 8px
}

.title-input {
  width:min(420px,62vw); height:40px; padding:0 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; font-size:16px; font-weight:700; color:var(--ink); background:#fff
}

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

/* ---- Detail header favorite ---------------------------------------------- */
.detail-fav {
  width:40px; padding:0
}

.detail-fav .fav-on {
  display:none
}

.detail-fav.on {
  border-color:#bfe3d9; background:#f1faf7
}

.detail-fav.on .fav-off {
  display:none
}

.detail-fav.on .fav-on {
  display:inline-flex; color:var(--teal)
}

/* ---- Lines / Plain text toggle ------------------------------------------- */
.seg-toggle {
  display:inline-flex; padding:2px; border:1px solid var(--line); border-radius:9px; background:#f6f9f9
}

.seg-toggle button {
  border:0; background:none; padding:5px 10px; border-radius:7px; font:inherit; font-size:12px;
  font-weight:600; color:#7d8f9c; cursor:pointer; white-space:nowrap
}

.seg-toggle button.active {
  background:#fff; color:var(--ink); box-shadow:0 1px 2px #0b3a331a
}

.seg-toggle button:focus-visible {
  outline:2px solid var(--focus); outline-offset:1px
}

/* ---- Plain text view ------------------------------------------------------ */
.transcript-plain {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 25px 18px; display:flex; flex-direction:column; gap:14px
}

.transcript-plain[hidden] {
  display:none
}

.plain-block {
  margin:0; font-size:13.5px; line-height:1.75; color:var(--text)
}

.plain-block strong {
  display:block; margin-bottom:2px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--teal)
}

/* ---- Modal fields (find & replace) --------------------------------------- */
.modal-field {
  display:flex; flex-direction:column; gap:5px; margin:12px 0
}

.modal-field label {
  font-size:12px; font-weight:600; color:#5c6b76
}

.modal-input {
  height:38px; padding:0 12px; border:1px solid var(--line); border-radius:9px; background:#fff;
  font:inherit; font-size:13px; color:var(--text)
}

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

.modal-check {
  display:flex; align-items:center; gap:8px; margin:4px 0 8px; font-size:12.5px; color:#5c6b76
}

.modal-check input {
  accent-color:var(--teal)
}

/* ---- Unlock screen ------------------------------------------------------- */
.unlock-body {
  display:flex; align-items:center; justify-content:center; min-height:100dvh; background:#f4f9f8
}

.unlock-shell {
  width:100%; max-width:470px; padding:32px 20px
}

.unlock-card {
  text-align:center; padding:34px 30px
}

.unlock-glyph {
  display:inline-grid; place-items:center; width:52px; height:52px; margin-bottom:14px;
  border-radius:14px; background:#e9f7f3; color:var(--teal)
}

.unlock-glyph .cs-icon {
  width:24px; height:24px
}

.unlock-card h1 {
  margin:0 0 8px; font-size:22px
}

.unlock-card p {
  margin:0 0 18px; font-size:13px; line-height:1.6; color:#6c7f8b
}

.unlock-form {
  display:flex; flex-direction:column; gap:10px
}

.unlock-input {
  height:42px; padding:0 13px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:13.5px
}

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

.unlock-error {
  margin:0; font-size:12.5px; color:var(--danger)
}

.unlock-card .tiny {
  margin:16px 0 0
}

/* ---- Keyword corrections (settings) -------------------------------------- */
.corrections-table {
  display:flex; flex-direction:column; gap:8px; margin:14px 0 0
}

.correction-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; gap:8px; align-items:center
}

.correction-row .select {
  height:38px; min-width:0
}

.correction-arrow {
  color:#9aa9b3; font-size:13px
}

.corrections-actions {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px
}

.corrections-spacer {
  flex:1 1 20px
}

.corrections-input {
  flex:1 1 220px; min-width:200px; height:38px
}

@media (max-width:780px) {
  .correction-row { grid-template-columns:minmax(0,1fr) auto }
  .correction-row [data-correction-from] { grid-column:1; }
  .correction-row [data-correction-to] { grid-column:1; }
  .correction-arrow { grid-column:2; grid-row:1; align-self:center }
  .correction-row .icon-button { grid-column:2; grid-row:2 }
}

/* ---- Notes / highlights ---------------------------------------------------
   A note is a timestamp plus optional text. Two surfaces read the same data:
   the pin in the line gutter (jump to it) and the Notes view (edit it).
   The Notes view owns its own scroll area, like .transcript-lines, so the
   toolbar and the "add" row stay pinned in the fixed-height detail layout. */

.transcript-panel {
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
}

.transcript-memos {
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0
}

.transcript-memos[hidden] {
  display:none
}

/* The list scrolls, the add row does not. Keeping the row out of the scroll
   container avoids a sticky element over a scrollport that starts above it. */
.transcript-memos>[data-memo-list] {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px 25px 18px
}

.memo-add-row {
  flex:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px; align-items:center; padding:13px 25px; background:#fbfdfd; border-bottom:1px solid var(--line)
}

.memo-stamp {
  padding:6px 8px; border-radius:6px; background:var(--pale); color:var(--teal-dark);
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.02em; line-height:1.2;
  font-variant-numeric:tabular-nums; white-space:nowrap
}

.memo-input {
  height:36px; min-width:0; padding:0 11px; border:1px solid var(--line); border-radius:8px;
  background:#fff; font:inherit; font-size:13px; color:var(--text)
}

.memo-input::placeholder {
  color:#9dafb8
}

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

.memo-input:disabled {
  background:#f4f7f8; color:#9dafb8; cursor:not-allowed
}

.memo-list {
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column
}

.memo-item {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start;
  padding:9px 6px 9px 0; border-bottom:1px solid #f0f4f5
}

.memo-item:last-child {
  border-bottom:0
}

.memo-time {
  padding:3px 7px; border:1px solid transparent; border-radius:6px; background:var(--pale);
  font-family:var(--mono); font-size:11.5px; font-weight:600; line-height:1.35; color:var(--teal-dark);
  font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap
}

.memo-time:hover {
  background:var(--pale-strong); border-color:#c8e6de
}

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

.memo-time:disabled {
  cursor:default; opacity:.75
}

.memo-text {
  padding-top:2px; font-size:13.5px; line-height:1.6; color:var(--text);
  overflow-wrap:anywhere; white-space:pre-wrap
}

.memo-text.is-blank {
  color:var(--muted); font-style:italic
}

.memo-input-inline {
  width:100%; height:32px; font-size:13px
}

.memo-actions {
  display:flex; gap:2px; align-items:center
}

.memo-action {
  border:0; background:none; padding:3px 6px; border-radius:6px;
  font:inherit; font-size:11.5px; font-weight:600; color:#8ba0ad; cursor:pointer
}

.memo-action:hover {
  background:#f1f6f7; color:var(--ink)
}

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

.memo-action-danger:hover {
  background:var(--danger-soft); color:var(--danger)
}

/* Row actions are noise until the row is touched, but touch devices have no
   hover state at all, so they stay visible there. */
@media (hover:hover) {
  .memo-actions {
    opacity:0; transition:opacity .12s ease
  }
  .memo-item:hover .memo-actions,.memo-item:focus-within .memo-actions {
    opacity:1
  }
}

.memo-empty {
  margin:0; padding:30px 0; text-align:center; font-size:12.5px; color:#8b9da8
}

/* ---- Memo pin in the transcript gutter ---- */
.memo-pin {
  position:absolute; top:19px; right:8px; z-index:1;
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
  border:0; border-radius:9px; background:var(--teal); color:#fff;
  font:inherit; font-size:10.5px; font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; cursor:pointer;
  box-shadow:0 1px 3px #0b3a3340; transition:background .12s ease,transform .12s ease
}

.memo-pin:hover {
  background:var(--teal-dark); transform:scale(1.08)
}

.memo-pin:focus-visible {
  outline:2px solid var(--focus); outline-offset:2px
}

/* Reserve room in the text column only on lines that carry a pin. */
.transcript-line:has(.memo-pin)>p {
  padding-right:26px
}

/* ---- Notes count badge on the view toggle ---- */
.seg-count {
  display:inline-grid; place-items:center; min-width:16px; height:16px; margin-left:5px; padding:0 4px;
  border-radius:8px; background:#e4eeef; color:#6b8087;
  font-size:10.5px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  vertical-align:1px
}

/* "Notes 0" is noise on a transcript nobody has annotated yet. */
.seg-count[data-count="0"] {
  display:none
}

.seg-toggle button.active .seg-count {
  background:var(--pale-strong); color:var(--teal-dark)
}

/* Search results only exist in the line view; showing "no lines match" while
   looking at notes would be a lie. */
.memos-mode [data-search-empty] {
  display:none
}

@media(max-width:1150px) {
  .memo-add-row {
    padding:12px 18px
  }
  .transcript-memos>[data-memo-list] {
    padding:6px 18px 16px
  }
  .memo-pin {
    top:17px; right:6px
  }
  .transcript-line:has(.memo-pin)>p {
    padding-right:22px
  }
}

@media(max-width:780px) {
  .memo-add-row {
    grid-template-columns:auto minmax(0,1fr); gap:8px
  }
  .memo-add-row .btn {
    grid-column:2; justify-self:start
  }
  .memo-actions {
    grid-column:2; grid-row:2
  }
  .memo-item {
    grid-template-columns:auto minmax(0,1fr)
  }
}

/* ---- AI summary card ------------------------------------------------------
   First card in the left column: the thing you read before the transcript.
   The four states (idle / running / failed / ready) are separate nodes toggled
   by [hidden], so switching between them never reflows the card's box. */

.summary-card {
  padding-bottom:19px
}

.summary-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap
}

.summary-head h2 {
  margin:0; font-size:16px
}

.summary-actions {
  display:flex; gap:6px; align-items:center
}

.summary-actions .btn {
  padding:5px 9px
}

.summary-hint {
  margin:9px 0 0; line-height:1.55
}

.summary-state {
  display:flex; gap:10px; align-items:start; margin-top:12px;
  padding:11px 13px; border-radius:10px; font-size:12.5px; line-height:1.55
}

.summary-running {
  align-items:center; background:#f2faf8; border:1px solid #d8ece7; color:#3d6a61
}

.summary-failed {
  background:var(--danger-soft); border:1px solid #f2d9d9; color:var(--danger)
}

.summary-failed strong {
  display:block; font-size:12.5px; margin-bottom:2px; overflow-wrap:anywhere
}

.summary-failed span {
  font-size:12px; opacity:.85
}

.summary-failed .cs-icon {
  width:16px; height:16px; flex:none; margin-top:1px
}

.summary-spinner {
  width:13px; height:13px; flex:none; border-radius:50%;
  border:2px solid #cfe6e0; border-top-color:var(--teal);
  animation:summary-spin .8s linear infinite
}

@keyframes summary-spin {
  to {
    transform:rotate(360deg)
  }
}

@media (prefers-reduced-motion:reduce) {
  .summary-spinner {
    animation-duration:2.4s
  }
}

/* Compound selector outranks the generic `.app-card p` colour. */
.app-card .summary-overview {
  margin:12px 0 0; font-size:13px; line-height:1.65; color:var(--text); overflow-wrap:anywhere
}

.summary-section {
  margin-top:14px
}

.summary-section h3 {
  margin:0 0 6px; font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--teal)
}

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

.summary-list li {
  position:relative; padding-left:15px; font-size:12.5px; line-height:1.55;
  color:#465b6b; overflow-wrap:anywhere
}

.summary-list li:before {
  content:''; position:absolute; left:2px; top:7px; width:5px; height:5px;
  border-radius:50%; background:#a9d8d0
}

/* Action items read as checkboxes rather than bullets, without pretending to
   be interactive. */
.summary-todos li:before {
  left:0; top:3px; width:9px; height:9px; border-radius:3px;
  background:transparent; border:1.6px solid #b9cbd2
}

.summary-stamp {
  margin:14px 0 0; padding-top:10px; border-top:1px solid #eef2f4; font-size:11px
}

.summary-form {
  margin-top:12px; display:flex; flex-direction:column; gap:10px
}

.summary-field {
  display:flex; flex-direction:column; gap:4px
}

.summary-field>span {
  font-size:11.5px; font-weight:700; color:#5c6b76
}

.summary-field small {
  font-weight:500; color:#9dafb8
}

.summary-input {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px;
  background:#fff; font:inherit; font-size:12.5px; line-height:1.55; color:var(--text);
  resize:vertical; min-height:56px
}

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

.summary-form-actions {
  display:flex; gap:7px; justify-content:flex-end; margin-top:2px
}

/* ---- Live recorder -------------------------------------------------------
   Two columns: the control surface on the left, the words on the right. The
   live area scrolls on its own so a long recording does not push the notes
   out of sight. */

.record-layout {
  display:grid; grid-template-columns:minmax(320px,0.85fr) minmax(0,1.15fr);
  gap:18px; align-items:start
}

.record-stage {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:14px 0 4px
}

.record-button {
  width:96px; height:96px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(180deg,#2f8f83,#1f6f65);
  color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 22px #14615a35, inset 0 1px 0 #ffffff40;
  transition:transform .14s ease, box-shadow .14s ease
}

.record-button .cs-icon {
  width:34px; height:34px; stroke-width:1.7
}

.record-button:hover:not(:disabled) {
  transform:translateY(-1px); box-shadow:0 10px 26px #14615a45, inset 0 1px 0 #ffffff40
}

.record-button:active:not(:disabled) {
  transform:translateY(0)
}

.record-button:disabled {
  opacity:.55; cursor:progress
}

.record-button:focus-visible {
  outline:2px solid var(--focus); outline-offset:3px
}

/* While the microphone is open the button turns into the stop control, so the
   way out is always under the thumb that started it. */
.record-panel[data-state="recording"] .record-button,
.record-panel[data-state="paused"] .record-button {
  background:linear-gradient(180deg,#d1584f,#b5433b)
}

.record-readout {
  display:flex; flex-direction:column; align-items:center; gap:3px
}

.record-timer {
  font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:.02em;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1
}

.record-state {
  font-size:12.5px; color:#8193a0
}

.record-meter {
  width:190px; height:5px; border-radius:3px; background:#e8eef0; overflow:hidden
}

.record-meter>span {
  display:block; width:100%; height:100%; background:linear-gradient(90deg,#7fd0c2,#1f6f65);
  transform:scaleX(0); transform-origin:left center; transition:transform .09s linear
}

.record-controls {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line)
}

.record-controls .btn {
  padding:8px 13px
}

.record-hint {
  margin:14px 0 0; text-align:center; font-size:12.5px; line-height:1.55
}

.record-warning {
  margin:10px 0 0; padding:9px 12px; border-radius:9px; text-align:center;
  background:#fff8e8; border:1px solid #f2e2bb; color:#8a6a1f; font-size:12px
}

.record-error {
  margin:10px 0 0; padding:9px 12px; border-radius:9px; text-align:center;
  background:var(--danger-soft); border:1px solid #f2d9d9; color:var(--danger); font-size:12px
}

.record-live {
  display:flex; flex-direction:column; min-height:420px
}

.record-live-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:10px
}

.record-live-head h2 {
  margin:0
}

.record-live-body {
  flex:1 1 auto; min-height:180px; max-height:46vh; overflow-y:auto;
  padding:12px 14px; border:1px solid var(--line); border-radius:11px;
  background:#fbfdfd; font-size:13.5px; line-height:1.65
}

.record-empty {
  margin:0; color:#94a6b0; font-size:12.5px
}

.record-line {
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px;
  margin:0 0 7px; color:var(--text)
}

.record-line-time {
  font-family:var(--mono); font-size:11.5px; color:var(--teal-dark);
  font-variant-numeric:tabular-nums; padding-top:2px
}

/* The half-finished sentence: dimmer, and slightly italic, so the eye can
   tell it apart from what has already been committed. */
.record-partial {
  margin:0; color:#6f8593; font-style:italic
}

.record-note-row {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:9px;
  align-items:center; margin-top:14px
}

.record-note-row .btn {
  padding:8px 13px
}

.record-notes {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  max-height:210px; overflow-y:auto
}

.record-done {
  margin-top:18px
}

.record-done-actions {
  display:flex; gap:9px; flex-wrap:wrap; margin-top:12px
}

@media(max-width:1080px) {
  .record-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .record-live {
    min-height:0
  }
  .record-live-body {
    max-height:none
  }
}

@media(max-width:620px) {
  .record-button {
    width:82px; height:82px
  }
  .record-timer {
    font-size:25px
  }
  .record-note-row {
    grid-template-columns:auto minmax(0,1fr)
  }
  .record-note-row .btn {
    grid-column:2; justify-self:start
  }
}