/* The Tools tab in the workspace panel (tools.js). Uses the tokens in chat.css and the form styles in jobs.css. */

/* panel head: the project buttons only matter on the project tabs */
.panel.onTools #wsPublish,.panel.onTools #wsOpenTab,.panel.onTools #wsZip,.panel.onTools .pubBar{display:none!important}

.tlScroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 28px;background:var(--card);-webkit-overflow-scrolling:touch}
.tlIntro{margin:2px 2px 14px}
.tlIntro b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.tlIntro p{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.5}
.tlSec+.tlSec{margin-top:18px}
.tlSec h3{font-size:12.5px;font-weight:700;color:var(--text2);margin:0 2px 8px}
.tlGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tlFine{margin:20px 2px 0;font-size:12px;color:var(--muted);line-height:1.5}

/* a tool card */
.tlCard{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:10px 12px;border-radius:10px;text-align:left;
  background:var(--card);border:1px solid var(--line2);transition:border-color .15s,box-shadow .15s}
button.tlCard:hover,button.tlCard:focus-visible{border-color:var(--gline);box-shadow:0 4px 14px rgba(11,27,63,.06);outline:0}
.tlIco{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent);flex:0 0 auto}
.tlIco svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tlTxt{flex:1;min-width:0}
.tlTxt b{display:block;font-size:13.5px;font-weight:650;line-height:1.3;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlTxt i{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:normal;font-size:12px;line-height:1.4;color:var(--muted);margin-top:2px}
.tlGo{width:14px;height:14px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:opacity .15s,transform .15s}
button.tlCard:hover .tlGo{opacity:1;transform:translateX(2px);stroke:var(--accent)}
.tlTag{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;color:var(--ok);background:rgba(21,128,61,.09);flex:0 0 auto}
.tlCard.off{background:var(--side);border-style:dashed}
.tlCard.off .tlIco,.tlCard.off .tlTxt b,.tlCard.off .tlTxt i{opacity:.55}
.tlCard.off .tlTxt i{-webkit-line-clamp:1}
.tlNeed{display:inline-block;margin:3px 0 -2px -6px;padding:2px 6px;border-radius:6px;font-size:12px;font-weight:700;color:var(--accent)}
.tlNeed:hover{background:var(--accent-soft)}

/* the chat next to an open panel: a tidier welcome grid and top bar */
.app:has(.panel.open) .jobGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.app:has(.panel.open) .jobCard{min-height:0}
@media (max-width:1700px){.app:has(.panel.open) #editAgent span,.app:has(.panel.open) #themeBtn span{display:none}}

/* one tool open */
.tlHead{display:flex;align-items:center;gap:10px;margin:-4px 0 14px}
.tlHead>div{flex:1;min-width:0}
.tlHead b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.tlHead i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.4}
.tlBack{width:32px;height:32px;margin-left:-6px;flex:0 0 auto}
.tlBack svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tlForm .jobFields{gap:10px 12px}
.tlField{margin-top:12px}
.tlField>p{font-size:12.5px;font-weight:600;color:var(--text2);margin-bottom:6px}
.tlField>p em{font-style:normal;font-weight:500;color:var(--muted)}
.tlForm .mErr{margin:12px 0 0}
.tlFoot{display:flex;align-items:center;gap:12px;margin-top:16px}
.tlNote{flex:1;min-width:0;font-size:12px;color:var(--muted);line-height:1.45}
.tlFoot .go{flex:0 0 auto;height:38px;padding:0 18px;border-radius:8px;font-weight:700;color:var(--on-accent);background:var(--accent);transition:background .15s}
.tlFoot .go:hover{background:var(--accent2)}
.tlAttach{display:flex;align-items:center;gap:10px;margin-top:12px}
.tlAttach .tbtn span{display:inline!important}
.tlAttN{font-size:12.5px;color:var(--muted)}

/* checkboxes (shared field type from jobs.js) */
.jobFields label.jobChk{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;line-height:1.45}
.jobFields label.jobChk input{display:inline-block;width:16px;height:16px;margin:2px 0 0;padding:0;flex:0 0 auto;accent-color:var(--accent);box-shadow:none}
.jobFields label.jobChk em{font-style:normal;color:var(--muted)}

/* thumbnails to pick from */
.tlMedia{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.tlThumb{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:68px;cursor:pointer}
.tlThumb input{position:absolute;top:5px;left:5px;z-index:1;width:15px;height:15px;margin:0;accent-color:var(--accent)}
.tlPic{display:grid;place-items:center;width:68px;height:68px;border-radius:9px;overflow:hidden;background:var(--surface2);border:1px solid var(--line2);transition:box-shadow .15s,border-color .15s}
.tlPic img,.tlPic video{width:100%;height:100%;object-fit:cover;display:block}
.tlPic b{font-size:11px;color:var(--muted)}
.tlThumb input:checked~.tlPic,.tlThumb.on .tlPic{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.tlCap{font-size:11px;color:var(--muted);max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlAdd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:68px;height:68px;border-radius:9px;border:1px dashed var(--line2);
  font-size:11px;font-weight:600;color:var(--text2);transition:border-color .15s,color .15s}
.tlAdd:hover{border-color:var(--gline);color:var(--accent)}
.tlAdd svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.tlNone{align-self:center;font-size:12.5px;color:var(--muted)}

/* segmented choice */
.jobFields .tlWide{grid-column:1/-1}
.tlRow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.tlLab{font-size:12.5px;font-weight:600;color:var(--text2)}
p.tlHint.tlWide{margin-top:-4px}
.tlSeg{display:inline-flex;padding:2px;border-radius:9px;background:var(--sunk);border:1px solid var(--line2)}
.tlSeg button{height:30px;padding:0 13px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text2);transition:background .15s,color .15s}
.tlSeg button:hover{color:var(--text)}
.tlSeg button[aria-checked="true"]{background:var(--card);color:var(--accent);box-shadow:0 0 0 1px var(--gline),0 1px 3px rgba(11,27,63,.08)}
.tlHint{display:block;flex-basis:100%;margin-top:5px;font-size:12px;font-weight:500;color:var(--muted);line-height:1.45}
.tlLinkBtn{font-size:12px;font-weight:700;color:var(--accent);margin-left:6px}
.tlLinkBtn[hidden]{display:none}

/* campaign builder */
.tlCb fieldset{border:0;padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line);min-width:0}
.tlCb fieldset:first-of-type{border-top:0;margin-top:0;padding-top:0}
.tlCb legend{float:left;width:100%;padding:0;margin-bottom:10px;font-size:13px;font-weight:700;color:var(--text)}
.tlCb legend .tlHint{display:inline;margin:0 0 0 6px;font-weight:500}
.tlCb legend+*{clear:both}
.tlCb .jobFields [hidden]{display:none}
.tlChecks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:10px 12px;border-radius:9px;background:var(--sunk);border:1px solid var(--line)}
.tlGen{margin-top:12px}
.tlAcct{margin:-6px 0 14px;font-size:12.5px;color:var(--muted)}
.tlSticky{position:sticky;bottom:-28px;z-index:2;margin:18px -18px -28px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line2)}
.tlSum{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--text);line-height:1.4}

/* calculator */
.tlIn{position:relative;display:block}
.tlIn input{padding-right:48px!important}
.tlIn em{position:absolute;right:11px;top:50%;transform:translateY(-50%);margin-top:3px;font-style:normal;font-size:12px;font-weight:600;color:var(--muted);pointer-events:none}
.tlOut{margin-top:16px}
.tlEmpty{padding:14px;border-radius:10px;background:var(--sunk);border:1px dashed var(--line2);font-size:13px;color:var(--muted);line-height:1.5}
.tlTiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tlTile{padding:12px;border-radius:10px;border:1px solid var(--line2);background:var(--side);min-width:0}
.tlTile span{display:block;font-size:12px;font-weight:600;color:var(--text2)}
.tlTile b{display:block;margin-top:4px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlTile i{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--muted);line-height:1.35}
.tlTile.bad b{color:var(--bad)}
.tlFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.tlFacts div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.tlFacts dt{color:var(--muted)}
.tlFacts dd{font-weight:650;color:var(--text);font-variant-numeric:tabular-nums}
.tlWarn{margin-top:10px;padding:10px 12px 10px 28px;border-radius:10px;background:#FFF8E3;border:1px solid #F0D27C;font-size:12.5px;color:#6E4C00;line-height:1.5}

/* dark mode */
[data-theme="dark"] .tlIco{color:#9AABFF}
[data-theme="dark"] button.tlCard:hover,[data-theme="dark"] button.tlCard:focus-visible{box-shadow:0 6px 20px rgba(0,0,0,.35)}
[data-theme="dark"] button.tlCard:hover .tlGo{stroke:#9AABFF}
[data-theme="dark"] .tlNeed,[data-theme="dark"] .tlLinkBtn,[data-theme="dark"] .tlSeg button[aria-checked="true"],[data-theme="dark"] .tlAdd:hover{color:#9AABFF}
[data-theme="dark"] .tlTag{color:#86EFAC;background:rgba(74,222,128,.12)}
[data-theme="dark"] .tlSeg button[aria-checked="true"]{box-shadow:0 0 0 1px var(--gline)}
[data-theme="dark"] .tlWarn{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35);color:#FCD34D}

/* phones: the panel is an overlay, one column of tools */
@media (max-width:900px){
  .pHead{gap:6px;padding:0 10px}
  .pTabs{gap:2px}
  .pTabs button{padding:0 8px}
}
@media (max-width:600px){
  .tlScroll{padding:14px 16px 24px}
  .tlGrid{grid-template-columns:minmax(0,1fr);gap:6px}
  .tlTiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tlFacts{grid-template-columns:minmax(0,1fr)}
  .tlSticky{bottom:-24px;margin:18px -16px -24px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .tlSticky .go{width:100%}
  .tlFoot{flex-wrap:wrap}
  .tlFoot .go{width:100%}
  .tlSeg button{padding:0 11px}
  .tlCb .jobFields,.tlCalc .jobFields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .tlCalc .tlIn input{padding-right:40px!important}
}