/* Echo Test/Review: source panel structure adapted to the portfolio's paper UI. */
#call-qa .project-visual { grid-column:5/13; grid-row:3; align-self:start; margin:8px 0 35px; }
#call-qa .project-note { top:38px; right:2%; }
.echo-ui {
  --echo-line:#c6c8d5; --echo-muted:#66687b; --echo-progress:1;
  color:#202132; background:#f6f6fb; border:1px solid #555c79;
  box-shadow:6px 7px 0 #b9c4eb, 7px 8px 0 #555c79;
  font:11px/1.45 var(--sans); pointer-events:none; user-select:none;
  text-align:left; overflow:hidden; transform:rotate(2deg);
}
.echo-ui * { box-sizing:border-box; }
.echo-ui p,.echo-ui h4,.echo-ui h5 { margin:0; }
.echo-titlebar { display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid #555c79; background:linear-gradient(100deg,#cdd8fa,#e7e3f0 70%,#f3cede); }
.echo-titlebar strong { font-size:12px; letter-spacing:-.02em; }
.echo-titlebar>span:last-child { margin-left:auto; white-space:nowrap; font:14px var(--mono); }
.echo-mark { display:grid; place-items:center; background:#25283b; color:#e4eaff; width:22px; height:22px; font:900 20px/1 var(--sans); }
.echo-fictional { color:#4e5269; font:9px var(--mono); }
.echo-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding:11px 12px; border-bottom:1px solid var(--echo-line); font-size:10px; }
.echo-check { border:1px solid #8597df; padding:4px 7px; background:#e6ebff; color:#253f99; }
.echo-status { margin-left:auto; font:9px var(--mono); color:#4e5269; }
.echo-status::before { content:''; display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:5px; }
.echo-workspace { display:grid; grid-template-columns:1fr 1fr; }
.echo-source,.echo-results { min-width:0; padding:13px; }
.echo-source { border-right:1px solid var(--echo-line); }
.echo-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:24px; margin-bottom:7px; }
.echo-heading h4 { font-size:12px; font-weight:600; }
.echo-heading small,.echo-heading>span { font:8px/1.4 var(--mono); color:var(--echo-muted); }
.echo-heading small { max-width:50%; text-align:right; }
.echo-editor { display:flex; gap:10px; background:#ededf5; border:1px solid var(--echo-line); padding:11px 9px; min-height:100px; font:10px/1.65 var(--mono); }
.echo-lines { color:#8a8d9f; border-right:1px solid var(--echo-line); padding-right:8px; }
.echo-editor p { overflow-wrap:anywhere; }
.echo-audio { margin:12px 0 10px; border:1px solid var(--echo-line); padding:9px; background:#fdfdff; }
.echo-audio-label { display:flex; align-items:center; gap:5px; font:9px var(--mono); }
.echo-audio-label strong { font-weight:500; }
.echo-time { margin-left:auto; color:var(--echo-muted); }
.echo-wave { height:43px; display:flex; align-items:center; justify-content:space-between; gap:2px; padding:6px 0; color:#6983d8; }
.echo-wave i { width:3px; height:var(--h); background:currentColor; transform:scaleY(.55); }
.echo-progress { height:2px; background:#e1e5f3; }
.echo-progress i { display:block; width:100%; height:100%; background:#5874cf; transform:scaleX(var(--echo-progress)); transform-origin:left; }
.echo-transcript { display:grid; gap:7px; }
.echo-fragment small { color:var(--echo-muted); font:8px var(--mono); }
.echo-fragment p { font-size:10px; line-height:1.4; margin-top:2px; }
.echo-results { display:flex; flex-direction:column; }
.echo-format { border:1px solid var(--echo-line); padding:3px 5px; }
.echo-result-body { position:relative; flex:1; border-top:1px solid var(--echo-line); }
.echo-empty { position:absolute; inset:20px 5px auto; color:var(--echo-muted); font:10px/1.6 var(--mono); }
.echo-finding { display:flex; gap:8px; padding:18px 0; border-bottom:1px solid var(--echo-line); }
.echo-result-icon { flex:0 0 19px; height:19px; background:#dce6f8; color:#334d8e; display:grid; place-items:center; font:12px var(--mono); }
.echo-finding--missed .echo-result-icon { background:#f3dceb; color:#7f3e69; }
.echo-finding--next .echo-result-icon { background:#e3dff6; color:#665386; }
.echo-finding h5 { font-size:11px; line-height:1.4; margin-bottom:5px; }
.echo-finding p { font-size:11px; line-height:1.55; color:#54586d; }
.echo-summary { display:flex; gap:7px; font:9px var(--mono); margin-top:12px; color:#334d8e; }
.echo-footer { display:flex; justify-content:space-between; gap:8px; border-top:1px solid var(--echo-line); padding:8px 12px; font:8px var(--mono); color:var(--echo-muted); }
.echo-ui[data-state='selecting'] .echo-check { background:#cbd7ff; }
.echo-ui[data-state='analyzing'] .echo-wave i { animation:echo-wave .62s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -61ms); }
.echo-ui[data-state='complete'] .echo-status { color:#334d8e; }
.echo-ui[data-paused='true'] .echo-wave i { animation-play-state:paused; }
.echo-ui[data-enhanced] .echo-finding,.echo-ui[data-enhanced] .echo-fragment { transition:opacity .25s; }
.echo-ui:not([data-enhanced]) .echo-empty { display:none; }
@keyframes echo-wave { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
@media (max-width:900px) {
  #call-qa .project-visual { grid-column:1/7; margin:48px 3px 5px; }
  #call-qa .project-note { top:98px; padding:6px 9px; }
  .echo-ui { transform:rotate(1deg); }
  .echo-titlebar { gap:6px; padding:8px; }
  .echo-fictional { font-size:8px; }
  .echo-titlebar strong { font-size:11px; }
  .echo-toolbar { padding:8px; gap:5px; }
  .echo-toolbar>span:first-child { display:none; }
  .echo-source,.echo-results { padding:9px; }
  .echo-workspace { grid-template-columns:1fr; }
  .echo-source { border-right:0; border-bottom:1px solid var(--echo-line); display:grid; grid-template-columns:1fr 1fr; gap:7px 10px; }
  .echo-source>.echo-heading:first-child { grid-column:1/3; margin:0; }
  .echo-editor { grid-column:1/3; min-height:76px; }
  .echo-audio { grid-column:1/3; margin:1px 0 0; }
  .echo-source>.echo-heading:nth-last-child(2) { display:none; }
  .echo-transcript { grid-column:1/3; gap:5px; min-height:99px; }
  .echo-fragment { display:grid; grid-template-columns:49px 1fr; gap:5px; align-items:baseline; }
  .echo-fragment p { margin:0; }
  .echo-finding { padding:10px 0; min-height:66px; }
  .echo-finding p { font-size:10px; }
  .echo-finding h5 { margin-bottom:3px; }
  .echo-summary { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { .echo-ui .echo-wave i { animation:none!important; } .echo-ui * { transition:none!important; } }