/* Live work, team and app writes (27-live-work.js, 28-live-team.js, 29-live-writes.js).
   Built from the live app's own tokens and pieces (mgd-task, ledger-row, lr-tag, toast). */

/* ---------- Home: What I'm working on ---------- */
.lw-now{ background:color-mix(in srgb, var(--brand-50) 55%, var(--g0)); }
.lw-now b{ color:var(--g900); }
.lw-bar{ display:block; position:relative; height:2px; margin-top:7px; border-radius:2px; background:var(--g100); overflow:hidden; }
.lw-bar::after{ content:''; position:absolute; top:0; left:-35%; width:35%; height:100%; background:var(--brand); animation:lwRun 1.3s linear infinite; }
@keyframes lwRun{ to{ left:100%; } }
.lw-st{ color:var(--brand-700) !important; }
.mg-aside.lw-live{ color:var(--brand-700); font-weight:600; }
.mg-aside.lw-live::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--brand); margin-right:6px; vertical-align:1px; animation:mgrPip 1.6s infinite; }
.lw-done{ border-top:1px solid var(--g100); padding:8px 16px 12px; }
.lw-done-h{ font:600 var(--f12)/1 var(--font-ui); color:var(--g500); padding:4px 0 8px; }
.lw-done-r{ display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:var(--f12); color:var(--g600); line-height:1.4; animation:lwIn .3s ease; }
.lw-done-r span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-done-r small{ flex:none; font:500 11px/1.4 var(--font-num); color:var(--g500); }
.lw-done-r.bad span{ color:var(--neg); }
@keyframes lwIn{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

/* ---------- people ---------- */
.lt-av{ width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center; flex:none; font:700 10px/1 var(--font-ui); background:var(--g50); color:var(--g600); position:relative; }
.lt-av.on{ background:#E6EEF8; color:#0B4B8C; }
.lt-av.on::after{ content:''; position:absolute; right:-1px; bottom:-1px; width:7px; height:7px; border-radius:50%; background:var(--brand); border:2px solid var(--g0); }
.lt-av.more{ background:var(--g100); color:var(--g600); }
.lt-faces{ display:inline-flex; align-items:center; height:36px; padding:0 6px; border:0; background:none; border-radius:var(--r-ctl); cursor:pointer; flex:none; }
.lt-faces:hover{ background:var(--g50); }
.lt-faces[hidden]{ display:none; }
.lt-faces .lt-av{ margin-left:-6px; border:2px solid var(--g0); width:28px; height:28px; }
.lt-faces .lt-av:first-child{ margin-left:0; }
.mg-drawer-h > .lt-here{ flex:none; display:flex; align-items:center; gap:4px; margin-top:4px; font:600 var(--f12)/1 var(--font-ui); color:var(--brand-700); }
.lt-here[hidden]{ display:none !important; }
.lt-here > span:last-child{ margin-left:4px; }

/* threads */
.lt-thread{ display:flex; flex-direction:column; gap:12px; margin-bottom:12px; }
.lt-msg{ display:grid; grid-template-columns:24px minmax(0, 1fr); gap:10px; }
.lt-msg-h{ display:flex; align-items:baseline; gap:8px; }
.lt-msg-h b{ font-size:var(--f13); color:var(--g900); }
.lt-msg-h span{ font:500 11px/1 var(--font-num); color:var(--g500); }
.lt-msg p{ margin:4px 0 0; padding:8px 11px; background:var(--g25); border:1px solid var(--g100); border-radius:var(--r-panel); font-size:var(--f13); line-height:1.5; color:var(--g900); white-space:pre-wrap; }
.lt-msg.me p{ background:var(--brand-50); border-color:color-mix(in srgb, var(--brand) 18%, var(--g100)); }
.lt-typing{ display:flex; align-items:center; gap:8px; font:500 var(--f12)/1.3 var(--font-ui); color:var(--g600); padding:0 0 10px; }
.lt-typing[hidden]{ display:none; }
.lt-dots{ display:inline-flex; gap:3px; }
.lt-dots i{ width:5px; height:5px; border-radius:50%; background:var(--g500); animation:ltDot 1.1s infinite ease-in-out; }
.lt-dots i:nth-child(2){ animation-delay:.15s; } .lt-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes ltDot{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-2px); } }
.lt-thread-f{ display:flex; gap:8px; align-items:flex-end; }
.lt-thread-f textarea{ flex:1; resize:vertical; min-height:44px; font:500 var(--f13)/1.45 var(--font-ui); padding:8px 10px; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); color:var(--g900); }
.lt-thread-f textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }

/* timeline */
.lt-tl{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.lt-tl li{ display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid var(--g100); font-size:var(--f13); color:var(--g900); line-height:1.45; }
.lt-tl li:last-child{ border-bottom:0; }
.lt-tl-m{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 9.5px/1 var(--font-ui); }
.lt-tl li small{ font:500 11px/1.7 var(--font-num); color:var(--g500); white-space:nowrap; }
.lt-tl li.neg div{ color:var(--neg); } .lt-tl li.pos div{ color:var(--brand-700); } .lt-tl li.ai div{ color:var(--ai); } .lt-tl li.warn div{ color:var(--warn); }
.lt-tl li b{ font-weight:600; }

/* Inbox: owner */
.lt-owner{ display:flex; align-items:center; gap:6px; margin-top:8px; font:500 var(--f12)/1 var(--font-ui); color:var(--g500); }
.btn-row .lt-owner{ margin:0 0 0 auto; }
.lt-owner select{ height:26px; width:auto; max-width:180px; margin:0; padding:0 22px 0 8px; border:1px solid transparent; border-radius:var(--r-ctl); background-color:var(--g50); font:600 var(--f12)/1 var(--font-ui); color:var(--g900); cursor:pointer; }
.lt-owner select:hover{ border-color:var(--g200); }
.ledger-row.lt-fresh, .card.lt-fresh{ animation:ltFresh 2.4s ease-out 2; }
@keyframes ltFresh{ 0%{ background:color-mix(in srgb, #F59E0B 18%, transparent); } 100%{ background:transparent; } }

/* handoff cards */
.toast.lt-hand{ pointer-events:auto; align-items:center; border-left-color:var(--ai); min-width:320px; max-width:440px; }
.lt-hand-mark{ width:22px; height:22px; object-fit:contain; flex:none; }
.lt-hand-m{ flex:1; min-width:0; }
.lt-hand-m .t-sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lt-hand-x{ border:0; background:none; width:24px; height:24px; border-radius:6px; font-size:16px; line-height:1; color:var(--g500); cursor:pointer; flex:none; }
.lt-hand-x:hover{ background:var(--g50); color:var(--g900); }

/* ---------- writes ---------- */
.lr-tag.lx-run{ background:#E6EEF8; color:#0B4B8C; }
.lr-tag.lx-bad{ background:var(--neg-50); color:var(--neg); }
.lx-app{ flex:none; }
.lx-cap{ font-size:var(--f12); line-height:1.5; margin:2px 0; white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  .lw-bar::after, .mg-aside.lw-live::before, .lw-done-r, .lt-dots i, .ledger-row.lt-fresh, .card.lt-fresh{ animation:none !important; }
}

/* Cards sit beside Margyn's panel when it is open beside the page, never over where you type to it. */
@media (min-width:1101px){ body.mgr-open .toast-host{ right:402px; } }