/* Clone page result (public/clone-page.js), new look: the page's picture in a white frame
   beside what was read and the actions, then the prompt in a mono well. */
.cl-result{display:grid;gap:16px;scroll-margin-top:84px}
.cl-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:36px;align-items:center;padding:20px;border:.8px solid var(--ui-line);border-radius:20px;background:var(--ui-card)}
.cl-shot{display:block;padding:6px;border:.8px solid var(--ui-line);border-radius:16px;background:var(--ui-well);overflow:hidden}
.cl-shot img{display:block;width:100%;height:auto;border-radius:11px}
.cl-shot-empty{display:grid;place-items:center;aspect-ratio:16/10;font:500 13px var(--ui-mono);color:var(--ui-faint)}
.cl-kicker{margin:0 0 10px;font:400 12px/1.4 var(--ui-mono);color:var(--ui-faint)}
.cl-info h2{margin:0 0 8px;font-size:30px;line-height:1.15;font-weight:500;letter-spacing:-.03em}
.cl-facts{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ui-dim)}
.cl-swatches{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.cl-swatches button{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 .8px var(--ui-line-strong);cursor:pointer;transition:transform .15s}
.cl-swatches button:hover{transform:scale(1.1)}
.cl-swatches button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.cl-actions{display:flex;flex-wrap:wrap;gap:8px}
.cl-actions .ft-btn svg{width:16px;height:16px}
/* Build it with: a button per AI app; it copies the prompt and says where to paste it. */
.cl-agents{margin:20px 0 0;padding:14px 0 0;border-top:.8px solid var(--ui-line)}
.cl-agents-title{margin:0 0 10px;font:400 12px var(--ui-mono);color:var(--ui-faint)}
.cl-agent-row{display:flex;flex-wrap:wrap;gap:8px}
.cl-agent{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 10px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px/1 var(--ui-font);letter-spacing:-.02em;cursor:pointer;transition:transform .15s,border-color .15s,background .15s}
.cl-agent:hover{transform:translateY(-1px);border-color:var(--ui-accent)}
.cl-agent:active{transform:none}
.cl-agent:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.cl-agent.is-on{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-link)}
.cl-agent img{width:16px;height:16px}
.cl-agent-mark{display:grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--ui-tag-bg);color:var(--ui-tag-fg);font:700 10px/1 var(--ui-mono)}
.cl-agent-out{color:var(--ui-faint)}
.cl-agent-how{margin:12px 0 0;padding:10px 12px;border-radius:12px;background:var(--ui-accent-soft);font-size:13.5px;line-height:1.5;color:var(--ui-text)}
.cl-agent-how code{padding:1px 6px;border-radius:6px;background:var(--ui-card);font:500 12.5px var(--ui-mono)}
:root:not([data-theme=dark]) .cl-agent img[src*="/tech/sites/"]{filter:brightness(0)}
.cl-prompt{position:relative;padding:6px;border:.8px solid var(--ui-line);border-radius:20px;background:var(--ui-well)}
.cl-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 4px 0 12px}
.cl-file{font:500 12.5px var(--ui-mono);color:var(--ui-text)}
.cl-count{margin-right:auto;font:400 12px var(--ui-mono);color:var(--ui-faint)}
.cl-bar .ft-btn svg{width:14px;height:14px}
.cl-text{max-height:none;margin:0;padding:20px 22px;border:.8px solid var(--ui-line);border-radius:14px;background:var(--ui-card);overflow:auto;font:400 13px/1.75 var(--ui-mono);color:var(--ui-text);white-space:pre-wrap;word-break:break-word;tab-size:2}
.cl-text:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
.cl-collapsed .cl-text{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.cl-more{display:block;margin:10px auto 6px;height:36px;padding:0 16px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px var(--ui-font);cursor:pointer}
.cl-more:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media (max-width:860px){.cl-head{grid-template-columns:1fr;gap:20px;padding:14px}}
@media (max-width:600px){
  .cl-info h2{font-size:24px}
  .cl-actions{flex-wrap:nowrap}
  .cl-actions .ft-btn-primary{flex:1 1 auto}
  .cl-sm-hide{display:none}
  .cl-count{display:none}
  .cl-text{padding:14px;font-size:12px}
}