/* Sandclaw CRM — ClawAgent : un bouton dans la barre du haut, et une grande page de conversation.
 *
 * ClawAgent n'existe pas dans l'artefact : c'est un composant NOUVEAU, donc ce fichier est la
 * seule exception à « pas de CSS neuf ». Tout est préfixé .ca-, rien ne touche une classe de
 * l'artefact, et la page suit le thème (clair / sombre) via les variables de tokens.css.
 */

/* ---- le bouton, dans la barre du haut ---- */
.ca-top{
  display:inline-flex; align-items:center; gap:7px; height:34px; flex:none;
  padding:0 12px 0 5px; border-radius:999px; box-sizing:border-box;
  background:color-mix(in srgb, #E8734A 16%, transparent);
  color:color-mix(in srgb, #E8734A 55%, var(--text-primary));
  border:1px solid transparent;
  font:var(--fw-semibold) 12px/1 var(--font); cursor:pointer;
  transition:filter 140ms var(--ease-out), transform 100ms var(--ease-out);
}
.ca-top:hover{filter:brightness(1.1);}
.ca-top:active{transform:scale(.97);}
.ca-top[aria-expanded="true"]{border-color:#E8734A;}
.ca-top kbd{font:500 9px/1 var(--mono); color:var(--text-muted); border:1px solid var(--border-strong); border-radius:4px; padding:2px 4px;}
.ca-top:focus-visible, .ca-send:focus-visible, .ca-x:focus-visible, .ca-tool:focus-visible, .ca-chip:focus-visible{outline:2px solid #F0906A; outline-offset:2px;}
.ca-av{width:24px; height:24px; border-radius:50%; display:block; object-fit:cover; flex:none;}
.ca-av-l{width:40px; height:40px;}

/* ---- la grande page ---- */
body.ca-lock{overflow:hidden;}
.ca-page{
  position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
  padding:28px; background:rgba(10,9,8,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font);
}
.ca-page.open{display:flex; animation:ca-fade 160ms var(--ease-out);}
.ca-sheet{
  width:min(1180px,100%); height:min(860px,100%); display:flex; flex-direction:column;
  background:var(--bg-surface); color:var(--text-primary); border:1px solid var(--border-strong);
  border-radius:22px; box-shadow:var(--shadow-overlay); overflow:hidden;
  animation:ca-pop 220ms var(--ease-out);
}
@keyframes ca-fade{from{opacity:0;} to{opacity:1;}}
@keyframes ca-pop{from{opacity:0; transform:translateY(10px) scale(.985);} to{opacity:1; transform:none;}}

.ca-head{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border-subtle); flex:none;}
.ca-title{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ca-title b{font:var(--fw-bold) 16px/1.2 var(--font-display); letter-spacing:-.01em;}
.ca-title span{font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ca-tag{font-size:11px; font-weight:var(--fw-semibold); color:var(--warning); background:var(--warning-bg); border-radius:999px; padding:3px 9px; flex:none;}
.ca-tools{margin-left:auto; display:flex; align-items:center; gap:8px; flex:none;}
.ca-tool{display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--border-strong); color:var(--text-secondary); border-radius:999px; padding:7px 12px; font:500 12px/1 var(--font); cursor:pointer;}
.ca-tool:hover{background:var(--bg-surface-hover); color:var(--text-primary);}
.ca-tool svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8;}
.ca-x{background:none; border:none; padding:8px; color:var(--text-muted); cursor:pointer; display:flex; border-radius:999px;}
.ca-x:hover{color:var(--text-primary); background:var(--bg-surface-hover);}
.ca-x svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;}

.ca-body{display:grid; grid-template-columns:290px minmax(0,1fr); flex:1; min-height:0;}
.ca-rail{padding:20px 18px; border-right:1px solid var(--border-subtle); background:var(--bg-surface-raised); overflow-y:auto;}
.ca-ctx{font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.05em; text-transform:uppercase; color:var(--accent-t); margin-bottom:14px;}
.ca-hint{font-size:11px; color:var(--text-muted); margin-bottom:2px;}
.ca-chips{display:flex; flex-direction:column; gap:8px;}
.ca-chip{text-align:left; font:400 13px/1.4 var(--font); color:var(--text-primary); background:var(--bg-surface); border:1px solid var(--border-strong); border-radius:12px; padding:10px 12px; cursor:pointer; transition:background 120ms var(--ease-out), border-color 120ms var(--ease-out);}
.ca-chip:hover{background:var(--accent-bg); border-color:var(--accent);}

.ca-main{display:flex; flex-direction:column; min-width:0; min-height:0;}
.ca-log{flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:24px max(24px, calc((100% - 780px) / 2));}
.ca-m{border-radius:16px; padding:11px 15px; font-size:14px; line-height:1.55; max-width:84%; overflow-wrap:anywhere;}
.ca-me{align-self:flex-end; background:var(--accent); color:var(--accent-fg); border-bottom-right-radius:6px;}
.ca-bot{align-self:flex-start; background:var(--bg-surface-raised); border:1px solid var(--border-subtle); border-bottom-left-radius:6px;}
.ca-sys{align-self:center; font-size:12px; color:var(--text-muted); background:none; padding:0;}
.ca-src{font-size:11.5px; color:var(--text-muted); margin-top:6px;}
.ca-go{display:inline-block; margin-top:8px; font:500 12px/1 var(--font); background:var(--accent-bg); color:var(--accent-t); border:none; border-radius:999px; padding:6px 12px; cursor:pointer;}
.ca-prop{margin-top:10px; border:1px solid var(--accent); border-radius:12px; padding:10px 12px; background:var(--bg-surface);}
.ca-prop b{display:block; font-weight:var(--fw-semibold); margin-bottom:2px;}
.ca-prop .ca-btns{display:flex; gap:8px; margin-top:10px;}
.ca-btn{font:500 12px/1 var(--font); border-radius:999px; padding:7px 14px; cursor:pointer; border:1px solid var(--border-strong); background:none; color:var(--text-primary);}
.ca-btn.ok{background:var(--accent); border-color:var(--accent); color:var(--accent-fg);}
.ca-dots{display:inline-flex; gap:4px; padding:3px 0;}
.ca-dots i{width:6px; height:6px; border-radius:50%; background:var(--text-muted); animation:ca-b 1s infinite ease-in-out;}
.ca-dots i:nth-child(2){animation-delay:.15s;} .ca-dots i:nth-child(3){animation-delay:.3s;}
@keyframes ca-b{0%,80%,100%{opacity:.3;} 40%{opacity:1;}}

.ca-form{
  display:flex; align-items:center; gap:8px; flex:none;
  margin:0 max(24px, calc((100% - 780px) / 2)) 22px; padding:8px 8px 8px 18px;
  background:var(--field-bg); border:1px solid var(--border-strong); border-radius:18px;
  transition:border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.ca-form:focus-within{border-color:var(--accent); box-shadow:var(--focus-ring);}
.ca-in{flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text-primary); font:400 14.5px/1.4 var(--font);}
.ca-in::placeholder{color:var(--text-muted);}
.ca-send{width:38px; height:38px; border-radius:50%; border:none; background:var(--accent); color:var(--accent-fg); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:transform 120ms var(--ease-out);}
.ca-send:active{transform:scale(.92);}
.ca-send svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2;}

/* ---- historique des conversations (colonne de gauche) ---- */
.ca-rail{display:flex; flex-direction:column; gap:18px;}
.ca-histbox{border-top:1px solid var(--border-subtle); padding-top:16px; display:flex; flex-direction:column; min-height:0;}
.ca-hist-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:11px; font-weight:var(--fw-semibold); letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted);}
.ca-link{background:none; border:none; padding:0; font:500 11px/1 var(--font); letter-spacing:0; text-transform:none; color:var(--text-muted); cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.ca-link:hover{color:var(--danger);}
.ca-hist{display:flex; flex-direction:column; gap:2px;}
.ca-h{position:relative; display:flex; align-items:center; border-radius:10px;}
.ca-h:hover{background:var(--bg-surface-hover);}
.ca-h.on{background:var(--accent-bg);}
.ca-h-open{flex:1; min-width:0; text-align:left; background:none; border:none; padding:8px 10px; cursor:pointer; color:var(--text-primary); display:flex; flex-direction:column; gap:2px;}
.ca-h-t{font:400 12.5px/1.35 var(--font); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ca-h.on .ca-h-t{font-weight:var(--fw-semibold);}
.ca-h-d{font-size:11px; color:var(--text-muted);}
.ca-h-x{background:none; border:none; padding:6px; margin-right:4px; border-radius:8px; color:var(--text-muted); cursor:pointer; display:flex; opacity:0; transition:opacity 120ms var(--ease-out);}
.ca-h:hover .ca-h-x, .ca-h-x:focus-visible{opacity:1;}
.ca-h-x:hover{color:var(--danger); background:var(--danger-bg);}
.ca-h-x svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;}
.ca-h-open:focus-visible, .ca-link:focus-visible{outline:2px solid #F0906A; outline-offset:2px; border-radius:8px;}

@media (max-width:1240px){ .ca-top kbd{display:none;} }
@media (max-width:1000px){ .ca-top-label{display:none;} .ca-top{padding:0 5px;} }
@media (max-width:860px){
  .ca-page{padding:0;}
  .ca-sheet{height:100%; border-radius:0; border:none;}
  .ca-body{grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);}
  .ca-rail{border-right:none; border-bottom:1px solid var(--border-subtle); padding:12px 14px; max-height:42vh;}
  .ca-ctx{margin-bottom:8px;} .ca-hint{display:none;}
  .ca-rail{gap:10px; overflow-y:auto;}
  .ca-chips{flex-direction:row; gap:6px; overflow-x:auto;}
  .ca-histbox{padding-top:10px;} .ca-hist-head{margin-bottom:6px;}
  .ca-hist{flex-direction:row; gap:6px; overflow-x:auto;}
  .ca-h{flex:none; min-width:170px; max-width:220px; border:1px solid var(--border-strong);}
  .ca-h-x{opacity:1;}
  .ca-chip{white-space:nowrap; padding:7px 11px; font-size:12px;}
  .ca-title span, .ca-tool span{display:none;}
  .ca-log{padding:16px;} .ca-form{margin:0 16px 16px;} .ca-m{max-width:92%;}
}
@media (prefers-reduced-motion:reduce){
  .ca-top, .ca-page.open, .ca-sheet{animation:none; transition:none;} .ca-dots i{animation:none;}
}