/* Design C3: lines section as an approval sheet. A click, not a lane. */
.lines3{padding-block:var(--s-6)}
.lines3 .sec-head{margin-bottom:var(--s-5)}
.ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-5);padding:var(--s-5);border-radius:var(--radius-lg);background:var(--surface);box-shadow:0 1px 0 #e3e7d8,0 36px 60px -40px rgba(41,45,39,.35)}
.ctl-k{font:600 13px/1.3 var(--sans);color:var(--muted);margin-bottom:var(--s-3)}
.ctl-list{display:grid;gap:8px;align-content:start}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:0 16px;border:0;border-radius:var(--radius);background:var(--tint-1);color:var(--ink);text-align:left;font:500 16px/1.3 var(--sans);box-shadow:inset 0 0 0 1.5px transparent}
.row:hover{background:#e1e7d4}
.row[aria-pressed=true]{background:var(--deep);color:var(--paper);box-shadow:none}
.lv{flex:none;padding:6px 11px;border-radius:999px;font:600 12px/1 var(--sans)}
.lv-own{background:#d9e6cc;color:var(--deep)}
.lv-ask{background:#f3e0d2;color:#6e3a22}
.lv-no{background:#e4e2d8;color:#4a5342}
.lv-no::before{content:"";display:inline-block;width:8px;height:6px;margin-right:6px;border-radius:2px;background:currentColor;box-shadow:0 -3px 0 -1.5px currentColor}
.row[aria-pressed=true] .lv{background:rgba(255,255,255,.16);color:var(--paper)}

.ctl-thread{display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);overflow:hidden;background:#efeadf;min-height:410px}
.th-head{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--deep);color:var(--paper)}
.th-head img{width:38px;height:38px;border-radius:50%;background:var(--paper);padding:4px;object-fit:contain}
.th-head b{display:block;font:600 15px/1.2 var(--sans)}
.th-head small{font:400 12px/1.2 var(--sans);color:var(--on-deep)}
.th-body{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:18px}
.me{align-self:flex-end;max-width:80%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--green);color:var(--paper);font:400 15px/1.4 var(--sans)}
.tr{display:grid;gap:8px;justify-items:start;max-width:92%}
.bub{padding:11px 14px;border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 1px 0 #ddd7c9;font:400 15px/1.45 var(--sans);color:var(--ink)}
.tag{font:600 12px/1.3 var(--sans);color:var(--muted);padding-left:6px}
.tag.t-own{color:var(--green)}.tag.t-ask{color:var(--terra-deep)}
.ctl .ask-card{width:100%;padding:14px;border-radius:16px;background:var(--deep);color:var(--paper);--focus:var(--terra-lite)}
.ctl .ask-q{font:600 16px/1.35 var(--sans)}
.ctl .ask-quote{margin:8px 0 14px;font:400 14px/1.5 var(--sans);color:var(--on-deep)}
.ctl .ask-row{display:flex;gap:8px;flex-wrap:wrap}
.ctl .ask-row .btn-ink{background:var(--paper);color:var(--ink);box-shadow:0 3px 0 #1f2c25}
.ctl .alt{margin-top:2px}
.lines3 .foot{margin-top:var(--s-3);text-align:center}
.typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:4px 16px 16px 16px;background:#fff}
.typing i{width:6px;height:6px;border-radius:50%;background:#b9c3ab}
@media (prefers-reduced-motion:no-preference){
  .th-body > *{animation:lIn .35s var(--ease) both}
  @keyframes lIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .typing i{animation:lDot 1s ease-in-out infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes lDot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-3px)}}
  .row{transition:background .15s}
}
@media (min-width:1000px) and (max-height:820px){
  .lines3{padding-block:var(--s-5)}
  .ctl{padding:var(--s-4);gap:var(--s-4)}
  .row{min-height:48px}
  .ctl-thread{min-height:350px}
  .lines3 .foot{display:none}
}
@media (max-width:900px){.ctl{grid-template-columns:1fr}.ctl-thread{min-height:340px}}

/* progress between the question and the finished result */
.ctl-reset{justify-self:start;margin-top:var(--s-2)}
.row .r-t{display:flex;align-items:center;gap:10px}
.row.is-waiting .r-t::before,.row.is-done .r-t::before,.row.is-held .r-t::before,.row.is-na .r-t::before{content:"";flex:none;width:10px;height:10px;border-radius:50%}
.row.is-waiting .r-t::before{background:var(--terra)}
.row.is-done .r-t::before{background:var(--green)}
.row.is-held .r-t::before{background:#b9c3ab}
.row.is-na .r-t::before{background:#8b9480}
.row.is-waiting:not([aria-pressed=true]){background:#f3e0d2}
.row[aria-pressed=true].is-waiting .r-t::before,.row[aria-pressed=true].is-done .r-t::before{background:var(--terra-lite)}
.th-empty{align-self:center;margin:auto;color:var(--muted);font:400 15px/1.5 var(--sans);text-align:center}
.xchg{display:flex;flex-direction:column;justify-content:flex-end;gap:12px;flex:1}
.flow{display:flex;gap:6px;align-items:center;padding-left:4px}
.flow li{position:relative;padding:5px 10px;border-radius:999px;background:#e3dccd;color:#6b6f66;font:600 11px/1 var(--sans);white-space:nowrap}
.flow li::after{content:"";position:absolute;left:100%;top:50%;width:6px;height:2px;margin-top:-1px;background:#cfc7b6}
.flow li:last-child::after{display:none}
.flow li.done{background:var(--green);color:#fff}
.flow li.act{background:var(--terra-lite);color:var(--deep)}
.flow li.na{background:#c9c4b6;color:#3f443b}
.ask-card.is-allowed{background:var(--green)}
.ask-card.is-held{background:#59614f}
.ask-res{display:flex;align-items:center;gap:10px;font:600 15px/1.35 var(--sans);color:var(--paper)}
.ask-res b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);font-size:14px}
@media (prefers-reduced-motion:no-preference){
  .xchg.enter{animation:xIn .3s var(--ease) both}
  @keyframes xIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .flow li.act{animation:xAct 1.2s ease-in-out infinite}
  @keyframes xAct{0%,100%{opacity:1}50%{opacity:.6}}
  .ask-card{transition:background .35s var(--ease)}
  .row.is-waiting .r-t::before{animation:xDot 1.2s ease-in-out infinite}
  @keyframes xDot{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
}
.row.is-done .lv{background:#d9e6cc;color:var(--deep)}
.row.is-held .lv{background:#e4e2d8;color:#4a5342}
.row.is-waiting .lv{background:var(--terra);color:#fff}
.row[aria-pressed=true].is-done .lv,.row[aria-pressed=true].is-waiting .lv{background:rgba(255,255,255,.18);color:var(--paper)}

.xchg .reply{display:grid;gap:8px;justify-items:start;max-width:92%}

.th-head .av{width:44px;height:44px}

.ctl-hint{margin-top:var(--s-2);font:600 13px/1.4 var(--sans);color:var(--terra-deep)}
@media (prefers-reduced-motion:no-preference){.ctl-hint:not([hidden]){animation:lIn .4s var(--ease) both}}

/* fixed-height chat: content scrolls inside it, the card never changes size */
.ctl{--thr-h:490px}
.ctl-thread{height:var(--thr-h);min-height:0;grid-template-rows:auto minmax(0,1fr)}
.th-body{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;min-height:0}
.th-body::-webkit-scrollbar{display:none}
@media (min-width:1000px) and (max-height:820px){.ctl{--thr-h:410px}.ctl-thread{min-height:0}}
@media (max-width:900px){.ctl-thread{min-height:0;height:460px}}
/* the list reserves room for the hint and the reset link, so the card never changes height */
.ctl .ctl-hint[hidden]{display:block!important;visibility:hidden}
.ctl .ctl-reset[hidden]{display:inline-flex!important;visibility:hidden}