/* ==========================================================================
   agent_panel.css — Agent detail panel.
   Part of منصة عقاب dashboard styles. Split from the former app.css.
   Cascade order is significant; see docs/flows/INDEX.md.
   ========================================================================== */
/* ══════════════════════════════════════════════════════
   AGENT PANEL
══════════════════════════════════════════════════════ */
#agent-panel { flex: 1; overflow-y: auto; padding: 0; display: none; flex-direction: column; }
.ap-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px 14px; border-bottom: 1px solid var(--b1); flex-shrink: 0;
  background: var(--s1);
}
.ap-back {
  color: var(--t2); padding: 5px 9px; border-radius: var(--r1);
  font-size: 12.5px; transition: color .15s, background .15s;
  display: flex; align-items: center; gap: 5px;
}
.ap-back:hover { color: var(--g); background: var(--gd); }
.ap-av {
  width: 42px; height: 42px; border-radius: var(--rf);
  display: flex; align-items: center; justify-content: center;
  background: var(--s3); border: 1.5px solid var(--gb);
  color: var(--g); font-family: var(--fh); font-size: 14px; font-weight: 900; flex-shrink: 0;
}
.ap-meta { flex: 1; }
.ap-name { font-family: var(--fh); font-size: 15.5px; font-weight: 900; color: var(--t1); }
.ap-role { font-size: 11.5px; color: var(--t2); margin-top: 2px; }
.ap-body { padding: 18px 22px; flex: 1; }
.ap-section-label {
  font-size: 10px; font-weight: 700; color: var(--t2);
  letter-spacing: .8px; text-transform: uppercase; margin-bottom: 11px;
}
.ap-sessions { display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; }
.ap-sess-card {
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r2); padding: 11px 15px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ap-sess-card:hover { background: var(--s2); border-color: var(--gb); }
.ap-sess-preview { font-size: 13.5px; color: var(--t1); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sess-time { font-size: 11px; color: var(--t2); }
.ap-empty { text-align: center; padding: 40px 18px; }
.ap-empty-av { font-family: var(--fh); font-size: 38px; color: var(--g); opacity: .22; margin-bottom: 12px; }
.ap-empty-msg { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 22px; }
.ap-trigger-chip {
  border: 1px dashed var(--b2); color: var(--t2);
  font-size: 12px; padding: 7px 18px; border-radius: var(--rf);
  transition: color .2s, border-color .2s, background .2s;
  display: inline-block;
}
.ap-trigger-chip:hover { color: var(--g); border-color: var(--gbs); background: var(--gd); }