/* Live replica of the ToDo's sidebar. Visual vocabulary matches the real pane:
   tabs with counts, dim group labels, tinted meta pills, accent border on the open card. */
.lr-win{--pane:oklch(0.172 0.015 275);position:relative;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 40px 90px -40px oklch(0.05 0.02 275 / .9),0 0 0 1px oklch(0.95 0.008 275 / .03) inset;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:37rem;font-size:.84rem;line-height:1.45;color:var(--text);text-align:left}
.lr-bar{display:flex;align-items:center;gap:.9rem;height:2.4rem;padding:0 .9rem;border-bottom:1px solid var(--line-soft);background:oklch(0.18 0.015 275)}
.lr-dots{display:flex;gap:.4rem}
.lr-dots i{width:.62rem;height:.62rem;border-radius:50%;background:oklch(0.32 0.02 275)}
.lr-ttl{font:500 .74rem var(--mono);color:var(--dim);margin:0 auto}
.lr-body{display:grid;grid-template-columns:minmax(0,1fr) 22.75rem;min-height:0}
.lr-win.lr-closed .lr-body{grid-template-columns:minmax(0,1fr) 0}
.lr-win.lr-closed .lr-pane{visibility:hidden;border-left-color:transparent}

/* chat */
.lr-chat{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;min-width:0;overflow:hidden;justify-content:flex-end}
.lr-msg{max-width:92%;font-size:.88rem;line-height:1.55;color:var(--muted);animation:lr-in .5s var(--ease) both}
.lr-msg.user{align-self:flex-end;background:var(--raised);border:1px solid var(--line-soft);color:var(--text);padding:.5rem .8rem;border-radius:10px 10px 3px 10px}
.lr-msg.ai b{color:var(--text);font-weight:600}
.lr-tool{align-self:flex-start;display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;font:500 .74rem var(--mono);color:var(--muted);background:oklch(0.2 0.016 275);max-width:100%;animation:lr-in .5s var(--ease) both}
.lr-tool svg{width:.8rem;height:.8rem;color:var(--ok);flex:none}
.lr-tool span{min-width:0;overflow-wrap:anywhere}
.lr-tool em{font-style:normal;color:var(--text)}
@keyframes lr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* pane */
.lr-pane{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--pane);border-left:1px solid var(--line-soft)}
.lr-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem .9rem .3rem}
.lr-head h4{font-size:.95rem;letter-spacing:-.01em}
.lr-head .lr-x{all:unset;cursor:pointer;color:var(--dim);font-size:.95rem;padding:.1rem .4rem;border-radius:5px}
.lr-head .lr-x:hover{color:var(--text);background:var(--raised)}
.lr-scope{all:unset;cursor:pointer;margin:.1rem .9rem .5rem;align-self:flex-start;color:var(--muted);font-size:.8rem;padding:.15rem .5rem;border-radius:6px;display:inline-flex;gap:.4rem;align-items:center}
.lr-scope:hover{background:var(--raised);color:var(--text)}
.lr-scope svg{width:.55rem;height:.55rem}
.lr-tabs{display:flex;gap:.25rem;padding:0 .9rem .5rem;border-bottom:1px solid var(--line-soft)}
.lr-tab{all:unset;cursor:pointer;padding:.3rem .6rem;border-radius:7px;color:var(--muted);font-weight:500;font-size:.82rem;display:inline-flex;gap:.4rem}
.lr-tab i{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.lr-tab:hover{background:var(--raised);color:var(--text)}
.lr-tab[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.lr-tab[aria-pressed=true] i{color:inherit}
.lr-list{flex:1;min-height:0;overflow-y:auto;padding:.4rem .5rem 1rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.lr-gl{display:flex;gap:.45rem;align-items:center;padding:.7rem .5rem .25rem;font-size:.72rem;color:var(--dim);font-weight:500}
.lr-gl svg{width:.6rem;height:.6rem}
.lr-gl.dec{color:var(--accent)}
.lr-empty{padding:2rem 1rem;text-align:center;color:var(--dim)}

.lr-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.55rem;width:100%;padding:.5rem .5rem;border-radius:9px;cursor:pointer;margin-bottom:.15rem;transition:background .18s var(--ease)}
.lr-row:hover{background:oklch(0.235 0.018 275 / .7)}
.lr-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lr-mark{color:var(--dim);padding-top:.28rem}
.lr-mark svg{width:.62rem;height:.62rem}
.lr-mark.dec{color:var(--accent)}
.lr-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--text);font-weight:500;line-height:1.35}
.lr-row[data-closed] .lr-title{color:var(--muted);font-weight:450}
.lr-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.lr-pill{font:500 .74rem/1.5 var(--sans);padding:.04rem .45rem;border-radius:5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr-pill.p{color:var(--c-proj);background:oklch(0.76 0.12 250 / .15)}
.lr-pill.s{color:var(--c-sess);background:oklch(0.76 0.14 315 / .15)}
.lr-pill.a{color:var(--c-age);background:oklch(0.78 0.12 165 / .15)}
.lr-row.flash{animation:lr-flash 1.6s var(--ease)}
@keyframes lr-flash{0%{background:oklch(0.78 0.13 270 / .28)}100%{background:transparent}}

/* open card */
.lr-card{border:1px solid var(--accent);border-radius:11px;padding:.7rem .75rem .75rem;margin:.1rem 0 .3rem;background:oklch(0.2 0.02 275);animation:lr-in .3s var(--ease) both}
.lr-card-h{display:flex;gap:.6rem;justify-content:space-between;align-items:flex-start}
.lr-card-h .lr-title{display:block;-webkit-line-clamp:unset;font-weight:600}
.lr-close{all:unset;cursor:pointer;color:var(--dim);font-size:.76rem;padding:.12rem .4rem;border-radius:5px;flex:none}
.lr-close:hover{color:var(--text);background:var(--raised)}
.lr-detail{margin:.55rem 0 0;color:var(--muted);font-size:.82rem;line-height:1.55}
.lr-notes{margin:.7rem 0 0;display:grid;gap:.35rem}
.lr-note{font-size:.78rem;color:var(--muted);padding:.35rem .55rem;background:oklch(0.235 0.018 275 / .6);border-radius:7px}
.lr-note b{color:var(--dim);font-weight:500;margin-right:.35rem}
.lr-more{all:unset;cursor:pointer;font-size:.75rem;color:var(--dim)}
.lr-more:hover{color:var(--text)}
.lr-acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.lr-btn{all:unset;box-sizing:border-box;cursor:pointer;padding:.32rem .75rem;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font-size:.78rem;font-weight:550;transition:background .15s,border-color .15s}
.lr-btn:hover{background:var(--raised);border-color:oklch(0.42 0.03 275)}
.lr-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lr-btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.lr-btn.pri:hover{background:oklch(0.83 0.12 270)}
.lr-btn.plain{border-color:transparent;background:none;color:var(--dim)}
.lr-btn.plain:hover{color:var(--text);background:var(--raised)}
.lr-in{display:block;width:100%;box-sizing:border-box;margin-top:.7rem;padding:.5rem .6rem;min-height:3.6rem;resize:none;font:inherit;font-size:.8rem;color:var(--text);background:var(--pane);border:1px solid var(--line);border-radius:8px}
.lr-in:focus{outline:none;border-color:var(--accent)}
.lr-in::placeholder{color:var(--dim)}

.lr-toast{position:absolute;left:.9rem;right:.9rem;bottom:.8rem;background:oklch(0.27 0.02 275);border:1px solid var(--line);border-radius:9px;padding:.5rem .75rem;font-size:.78rem;color:var(--text);box-shadow:0 10px 30px -10px #000;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-toast.on{opacity:1;transform:none}

/* footer: prompt + band button */
.lr-foot{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem;border-top:1px solid var(--line-soft);background:oklch(0.18 0.015 275)}
.lr-prompt{flex:1;min-width:0;min-height:2.3rem;max-height:3.6rem;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--bg);padding:.45rem .7rem;font-size:.8rem;color:var(--dim);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-line}
.lr-prompt.has{color:var(--text)}
.lr-band{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:.8rem;font-weight:550;color:var(--muted);background:var(--surface);font-variant-numeric:tabular-nums}
.lr-band:hover{color:var(--text);background:var(--raised)}
.lr-band:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lr-band .bars{width:.8rem;height:.55rem;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative;flex:none}
.lr-band .bars::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%)}
.lr-band[aria-pressed=true]{color:var(--accent);border-color:oklch(0.78 0.13 270 / .5)}

.lr-replay{margin:.9rem 0 0;font-size:.85rem;color:var(--dim)}
.lr-replay button{all:unset;cursor:pointer;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.25em}
.lr-replay button:hover{color:var(--text);text-decoration-color:var(--accent)}

/* pane only */
.lr-win[data-mode=pane]{height:34rem;max-width:24rem;grid-template-rows:auto minmax(0,1fr)}
.lr-win[data-mode=pane] .lr-body{grid-template-columns:minmax(0,1fr)}
.lr-win[data-mode=pane] .lr-chat,.lr-win[data-mode=pane] .lr-foot{display:none}


@media (max-width:760px){
  .lr-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .lr-chat{max-height:9.5rem;padding:.7rem 1rem;gap:.5rem;border-bottom:1px solid var(--line-soft)}
  .lr-msg{font-size:.8rem}
  .lr-win{height:44rem}
  .lr-pane{border-left:0}
  .lr-win.lr-closed .lr-body{grid-template-columns:minmax(0,1fr)}
  .lr-win.lr-closed .lr-pane{display:none}
  .lr-win.lr-closed{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .lr-msg,.lr-tool,.lr-card{animation:none}
  .lr-row.flash{animation:none}
}