/* /ghostailabs.pro/css/agentic_media.css */

.agent-body{
  background:#0b0d10;
  color:#e8eef7;
}

.agent-page-pad{
  padding-top: 86px !important; /* adjust if your fixed menu height differs */
}
@media (max-width: 768px){
  .agent-page-pad{ padding-top: 96px !important; }
}

.agent-wrap{
  max-width: 1380px;
  margin: 0 auto;
  padding: 18px 14px 44px;
}

.agent-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  margin-bottom: 12px;
}
@media (max-width: 980px){
  .agent-head{ flex-direction:column; align-items:flex-start; }
}

.agent-h1{
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  letter-spacing:.2px;
}
.agent-sub{
  opacity:.75;
  margin-top: 6px;
  font-size: 12.5px;
}

.agent-stats{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
@media (max-width: 980px){
  .agent-stats{ justify-content:flex-start; }
}

.agent-pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  font-size: 12px;
}
.agent-pill-soft{
  border-color: rgba(120,255,220,.22);
  background: rgba(120,255,220,.06);
}
.agent-pill-k{ opacity:.75; font-weight: 800; }
.agent-pill-v{ font-weight: 900; }

.agent-controls{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr 1fr;
  gap: 10px;
  align-items:end;
  margin: 12px 0 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
@media (max-width: 1100px){
  .agent-controls{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .agent-controls{ grid-template-columns: 1fr; }
}

.agent-control{ min-width: 0; }
.agent-label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  opacity:.9;
  margin-bottom: 6px;
}

.agent-input, .agent-select{
  width:100%;
  background:#0e0f12 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.agent-control-btns{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
@media (max-width: 1100px){
  .agent-control-btns{ justify-content:flex-start; }
}

.agent-btn{
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
}
.agent-btn:hover{ opacity:.95; }
.agent-btn-primary{
  background: rgba(120,255,220,.14);
  border-color: rgba(120,255,220,.24);
}

.agent-modules{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 14px;
}
@media (max-width: 1100px){
  .agent-modules{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .agent-modules{ grid-template-columns: 1fr; }
}

.agent-mod{
  border-radius: 14px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
}
.agent-mod-t{ font-weight: 900; letter-spacing:.2px; }
.agent-mod-s{ opacity:.75; margin-top: 4px; font-size: 12.5px; }

.agent-mod-wp{ border-color: rgba(255,210,120,.20); }
.agent-mod-ig{ border-color: rgba(255,120,180,.20); }
.agent-mod-yt{ border-color: rgba(120,180,255,.20); }
.agent-mod-auto{ border-color: rgba(120,255,220,.20); }

.agent-alert{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,80,80,.28);
  background: rgba(255,80,80,.08);
  font-weight: 800;
  opacity:.95;
}

.agent-gallery{ margin-top: 10px; }

.agent-section{
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.26);
  margin-bottom: 12px;
  overflow:hidden;
}
.agent-section[open] .agent-section-head{
  border-bottom:1px solid rgba(255,255,255,.08);
}

.agent-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px;
  cursor:pointer;
  list-style:none;
}
.agent-section-head::-webkit-details-marker{ display:none; }

.agent-section-title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing:.2px;
}
.agent-section-count{
  padding: 3px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
  font-size: 12px;
  opacity:.95;
}

.agent-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}
@media (max-width: 1300px){
  .agent-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px){
  .agent-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .agent-grid{ grid-template-columns: 1fr; }
}

/* compact mode (fewer details, slightly tighter) */
.agent-compact .agent-card-meta{ display:none; }
.agent-compact .agent-card-actions{ gap: 6px; }
.agent-compact .agent-grid{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1300px){
  .agent-compact .agent-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px){
  .agent-compact .agent-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .agent-compact .agent-grid{ grid-template-columns: 1fr; }
}

.agent-card{
  border-radius: 14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  min-width: 0;
}

.agent-thumb{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:#0a0a0a;
  cursor:pointer;
}
.agent-thumb img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.agent-card-body{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.agent-card-title{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.2;
}

.agent-card-meta{
  opacity:.75;
  font-size: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items:center;
}

.agent-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.agent-card-actions{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.agent-mini{
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
.agent-mini:hover{ text-decoration:none; opacity:.95; }

.agent-mini-ghost{
  background: rgba(0,0,0,.22);
}

/* Modal styling */
.agent-modal{
  background:#0b0d10;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
}
.agent-modal-head{
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
}
.agent-modal-txt{ display:flex; flex-direction:column; gap: 2px; }
.agent-modal-title{ font-weight: 900; }
.agent-modal-meta{ opacity:.75; font-size: 12px; }
.agent-modal-close{ color:#fff; opacity:.8; }
.agent-modal-body{
  background:#000;
  padding: 10px;
}
.agent-modal-img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.10);
}
.agent-modal-foot{
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
}