/* Motion for voice processing. One easing, 150-400 ms transitions; slow loops (breathing, shimmer) are the only longer timings. Everything here is driven by motion.js observing the app's DOM. */
@keyframes docvoc-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger-fill) 45%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--danger-fill) 0%,transparent)}}
@keyframes docvoc-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes docvoc-flash{0%{background:var(--accent-tint)}100%{background:transparent}}
@keyframes docvoc-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes docvoc-arc{to{transform:rotate(360deg)}}
@keyframes docvoc-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@keyframes docvoc-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger-fill) 45%,transparent)}100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--danger-fill) 0%,transparent)}}
@keyframes docvoc-rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 1. Recording: level bars, listening caption, breathing Stop, interrupted card. */
.capture-input{position:relative}
.capture-input:has(.level-bars) meter{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.level-bars{display:flex;align-items:flex-end;gap:3px;height:18px;margin-top:2px}
.level-bars i{display:block;width:3px;height:100%;border-radius:2px;background:var(--level);opacity:.18;transform:scaleY(.22);transform-origin:bottom;transition:transform var(--motion-fast) var(--ease),opacity var(--motion-fast) var(--ease)}
.level-bars i:nth-child(3n+1){--peak:.6}.level-bars i:nth-child(3n+2){--peak:1}.level-bars i:nth-child(3n){--peak:.8}
.level-bars i.on{opacity:1;transform:scaleY(var(--peak,1))}
.level-bars.live i{background:var(--accent)}.recording .level-bars i{background:var(--recorder-muted)}.recording .level-bars i.on{background:var(--on-accent)}
.listen-caption{display:flex;align-items:center;gap:6px;font-size:var(--text-label);letter-spacing:.06em;text-transform:uppercase;color:var(--hint);transition:color var(--motion-base) var(--ease)}
.listen-caption::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;transition:transform var(--motion-base) var(--ease)}
.listen-caption.heard{color:var(--signed-dot)}.listen-caption.heard::before{transform:scale(1.4)}
.recording .listen-caption{color:var(--recorder-muted)}.recording .listen-caption.heard{color:var(--signed-accent)}
.capture[data-recording-state=recording] #finish,body.recording .capture:not([data-recording-state]) #finish{animation:docvoc-breathe 2.4s var(--ease) infinite}
.capture[data-recording-state=starting] #record-heading,.capture[data-recording-state=stopping] #record-heading{color:var(--muted)}
.capture[data-recording-state=interrupted]{background:var(--review-bg);border-color:var(--highlight-border);color:var(--review-text)}
.capture[data-recording-state=interrupted] #record-heading,.capture[data-recording-state=interrupted] #record-time,.capture[data-recording-state=interrupted] .capture-copy p{color:var(--review-text)}
.capture[data-recording-state=interrupted] .capture-copy #record-error{color:var(--review-text);font-weight:var(--weight-control)}
.capture[data-recording-state=interrupted] .level-bars i{background:var(--review-dot)}
.capture[data-recording-state=interrupted] #recover:not(:disabled){border-color:var(--highlight-border);color:var(--review-text)}
.capture{transition:background var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease),color var(--motion-base) var(--ease)}

/* 2. Transcribing: progress line under the recorder, shimmer where words will appear, tab flash when done. */
.transcribe-line{height:3px;margin:-8px 4px 0;border-radius:2px;background:var(--accent-tint);overflow:hidden;flex-shrink:0;transition:opacity var(--motion-slow) var(--ease)}
.transcribe-line i{display:block;height:100%;width:var(--progress,0%);border-radius:2px;background:var(--accent);transition:width var(--motion-slow) var(--ease)}
.transcribe-line.is-done{opacity:0}
.document.is-transcribing #transcript-pane{background:linear-gradient(100deg,transparent 30%,var(--accent-tint) 50%,transparent 70%);background-size:200% 100%;animation:docvoc-shimmer 1.8s linear infinite}
.document.is-transcribing #transcript{background:transparent}
.tabs button.flash{animation:docvoc-flash var(--motion-slow) var(--ease)}
#processing-progress.has-percent::after{content:'';display:block;height:3px;max-width:320px;margin-top:6px;border-radius:2px;background:var(--accent-tint);background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:var(--progress,0%) 100%;transition:background-size var(--motion-slow) var(--ease)}
.recording #processing-progress.has-percent::after{background-color:var(--secondary)}

/* 3. Note generation: three-step stepper replaces the spinner banner. */
.note-progress{flex-wrap:wrap;row-gap:10px;animation:docvoc-rise var(--motion-base) var(--ease)}
.note-progress:has(.note-steps):not([data-state=done]):not([data-state=error]) .progress-spinner{display:none}
.note-progress[data-state=done] .progress-spinner{animation:docvoc-pop var(--motion-base) var(--ease);color:var(--signed-dot)}
.note-steps{flex-basis:100%;display:flex;gap:16px;list-style:none;margin:0;padding:0}
.note-steps li{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:var(--text-secondary);color:var(--hint);transition:color var(--motion-base) var(--ease)}
.note-steps li i{width:18px;height:18px;flex:0 0 18px;border-radius:50%;border:2px solid var(--accent-surface);display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:var(--weight-heading);transition:background var(--motion-base) var(--ease),border-color var(--motion-base) var(--ease)}
.note-steps li.active{color:var(--accent-text)}.note-steps li.active i{border-color:var(--accent-surface);border-top-color:var(--accent);animation:docvoc-arc .9s linear infinite}
.note-steps li.done{color:var(--secondary)}.note-steps li.done i{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.note-steps li.done i::before{content:'✓'}
.note-steps li.failed{color:var(--danger)}.note-steps li.failed i{border-color:var(--danger);color:var(--danger);animation:none}.note-steps li.failed i::before{content:'!'}
.note-progress[data-state=done] .note-steps li{color:var(--secondary)}
.note-retry{display:none;--control-size:var(--control-compact);margin-left:auto;border-color:var(--danger);color:var(--danger)}
.note-progress[data-state=error] .note-retry{display:inline-flex}.note-progress[data-state=error] .note-retry:hover{background:var(--danger-bg)}
.note-progress[data-state=error] #note-progress-detail{color:var(--danger)}
#generate.is-processing{transition:background var(--motion-fast) var(--ease)}

/* 4. Loading skeletons: placeholder rows until the app renders, or 2.5 s. */
.skeleton-rows,.skeleton-page{display:flex;flex-direction:column;gap:14px;padding:18px 22px}
.skeleton-page{padding:8px 0;gap:18px}
.skeleton-rows i,.skeleton-page i{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,var(--row-highlight) 25%,var(--accent-tint) 50%,var(--row-highlight) 75%);background-size:200% 100%;animation:docvoc-shimmer 1.6s linear infinite}
.skeleton-rows i:nth-child(odd){width:62%}.skeleton-rows i:nth-child(even){width:44%}
.skeleton-page i:first-child{height:28px;width:38%;margin-bottom:8px}.skeleton-page i:nth-child(2){height:120px;width:100%;border-radius:var(--radius-card)}.skeleton-page i:nth-child(n+3){width:calc(70% - (var(--n,0)*8%))}
.skeleton-page i:nth-child(4){--n:1}.skeleton-page i:nth-child(5){--n:2}.skeleton-page i:nth-child(6){--n:3}
#patients-table:has(#home-records.is-loading) .empty-state{display:none}

/* 5. Helper: typing indicator, listening ring, muted mic. */
.chat-typing{display:inline-flex;gap:5px;align-items:center;padding:11px 13px;background:var(--sunken);border:1px solid var(--border);border-radius:13px;border-bottom-left-radius:5px;align-self:flex-start;flex-shrink:0;animation:docvoc-rise var(--motion-base) var(--ease)}
.chat-typing i{width:5px;height:5px;border-radius:50%;background:var(--hint);animation:docvoc-typing 1.2s var(--ease) infinite}
.chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
#assistant-mic{position:relative;transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
#assistant-mic.listening{animation:docvoc-ring 1.6s var(--ease) infinite}
#assistant-form.is-muted #assistant-mic{opacity:.55;color:var(--muted)}
#assistant-form.is-muted #assistant-mic::after{content:'';position:absolute;width:2px;height:22px;background:currentColor;border-radius:1px;transform:rotate(45deg)}
#assistant-form.is-muted+#assistant-voice-hint{color:var(--review-text)}

/* Sidebar Record button softly reflects a live recording. */
body.recording .record-visit{background:var(--recording-red);border-color:var(--recording-red);color:var(--on-recording-red);box-shadow:none}
/* A paused clock blinks its colon at 1 Hz (static under reduced motion). */
.capture[data-recording-state=paused] .clock-colon{animation:docvoc-colon 1s steps(1,end) infinite}
@keyframes docvoc-colon{50%{opacity:0}}

@media(max-width:760px){.note-steps{flex-direction:column;gap:6px}.note-retry{margin-left:0;flex-basis:100%}.transcribe-line{margin-top:-4px}.skeleton-rows,.skeleton-page{padding:14px 12px}.level-bars{height:22px;justify-content:center}}
@media(prefers-reduced-motion:reduce){
  .capture,.capture-input,.level-bars i,.listen-caption,.listen-caption::before,.transcribe-line,.transcribe-line i,.note-steps li,.note-steps li i,#assistant-mic,#processing-progress.has-percent::after,#generate.is-processing{transition:none}
  .capture[data-recording-state=recording] #finish,body.recording .capture:not([data-recording-state]) #finish,.capture[data-recording-state=paused] .clock-colon,.document.is-transcribing #transcript-pane,.tabs button.flash,.note-progress,.note-progress[data-state=done] .progress-spinner,.note-steps li.active i,.skeleton-rows i,.skeleton-page i,.chat-typing,.chat-typing i,#assistant-mic.listening{animation:none}
  .note-steps li.active i{border-color:var(--accent)}
  .capture[data-recording-state=recording] #finish,body.recording .capture:not([data-recording-state]) #finish{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-fill) 30%,transparent)}
  .document.is-transcribing #transcript-pane{background:var(--accent-tint)}
  #assistant-mic.listening{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger-fill) 30%,transparent)}
  .skeleton-rows i,.skeleton-page i{background:var(--accent-tint)}
}