/* ============================================================
   agentforce-panel.css — the Agentforce panel, one copy

   Lifted verbatim from Priya's Flow Builder panel so every demo
   renders the same agent: same 400px dock, same header with the
   sparkle avatar and "Agentforce" subtitle, same bubble shapes
   (agent 4/16/16/16, user 16/4/16/16), same pill actions, same
   rounded composer, same disclaimer. If it looks different in a
   demo, that demo is not linking this file.
   ============================================================ */

.agentp{
  width:400px; background:#fff; border-left:1px solid #c9c9c9;
  display:flex; flex-direction:column; flex:0 0 auto; min-height:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:#2e2e2e;
}
.agentp .aph{display:flex; align-items:center; gap:9px; padding:10px 12px 10px 14px; border-bottom:1px solid #c9c9c9; flex:0 0 auto;}
.agentp .aph .apico{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#066afe,#9050e9); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.agentp .aph .apico svg{width:14px; height:14px;}
.agentp .aph .aph-t{flex:1; min-width:0;}
.agentp .aph b{display:block; font-size:13.5px; font-weight:700; line-height:18px;}
.agentp .aph .aph-sub{display:block; font-size:11px; color:#5c5c5c; line-height:14px;}
.aph-ico{width:28px; height:28px; border:0; background:transparent; color:#5c5c5c; border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.aph-ico svg{width:16px; height:16px;}
.aph-ico:hover{background:#f3f3f3;}

.apb{flex:1; min-height:0; overflow:auto; padding:14px 14px 8px; display:flex; flex-direction:column;}
.af-msg{display:flex; gap:8px; margin-bottom:12px; align-items:flex-start;}
.af-msg.user{flex-direction:row-reverse;}
.af-av{width:24px; height:24px; border-radius:50%; flex:0 0 auto; overflow:hidden; background:linear-gradient(135deg,#066afe,#9050e9); display:flex; align-items:center; justify-content:center;}
.af-av img{width:24px; height:24px; object-fit:cover;}
.af-av.user{background:#032d60; color:#fff; font-size:10px; font-weight:700;}
.af-bub{max-width:86%; min-width:0;}
.af-bub .txt{background:#f3f3f3; border-radius:4px 16px 16px 16px; padding:10px 12px; font-size:13px; line-height:1.5; color:#2e2e2e;}
.af-msg.user .txt{background:#066afe; color:#fff; border-radius:16px 4px 16px 16px;}
.af-bub .txt b{font-weight:700;}

.adiff{border:1px solid #c9c9c9; border-radius:8px; overflow:hidden; font-size:12px; margin-top:8px; background:#fff;}
.adiff div{padding:8px 11px; line-height:1.45; border-bottom:1px solid #ececec;}
.adiff div:last-child{border-bottom:none;}
.adiff .g{background:#f2fbf5; color:#2e844a;}
.adiff .n{color:#5c5c5c;}

.af-actions{display:flex; flex-direction:column; gap:8px; margin:0 0 12px 32px;}
.af-act{text-align:left; background:#fff; border:1px solid #747474; color:#066afe; border-radius:16px; padding:8px 14px; font-size:13px; line-height:1.35; cursor:pointer; font-family:inherit;}
.af-act:hover{background:#f3f7ff; border-color:#066afe;}
.af-act.primary{background:#066afe; border-color:#066afe; color:#fff; font-weight:600;}
.af-act.primary:hover{background:#0354d1;}
.af-act:disabled{opacity:.5; cursor:default;}

.af-typing{display:flex; gap:8px; margin-bottom:12px; align-items:center;}
.af-typing .dots{display:flex; gap:4px; background:#f3f3f3; border-radius:4px 16px 16px 16px; padding:10px 14px;}
.af-typing .dots i{width:6px; height:6px; border-radius:50%; background:#747474; display:block; animation:afdot 1.2s infinite;}
.af-typing .dots i:nth-child(2){animation-delay:.15s;}
.af-typing .dots i:nth-child(3){animation-delay:.3s;}
@keyframes afdot{0%,80%,100%{opacity:.3}40%{opacity:1}}

.af-foot{flex:0 0 auto; border-top:1px solid #c9c9c9; padding:10px 12px 12px; background:#fff;}
.af-comp{display:flex; align-items:flex-end; gap:8px; border:1px solid #c9c9c9; border-radius:20px; padding:6px 6px 6px 14px; background:#fff;}
.af-comp:focus-within{border-color:#066afe; box-shadow:0 0 0 1px #066afe;}
.af-comp textarea{flex:1; border:0; resize:none; outline:none; font:13px system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#2e2e2e; line-height:1.4; max-height:72px; background:transparent; padding:6px 0;}
.af-send{width:32px; height:32px; border-radius:50%; background:#c9c9c9; color:#fff; border:0; display:flex; align-items:center; justify-content:center; cursor:default; flex:0 0 auto;}
.af-send svg{width:16px; height:16px;}
.af-send.on{background:#066afe; cursor:pointer;}
.af-legal{font-size:10.5px; color:#5c5c5c; text-align:center; margin-top:8px; line-height:1.35;}