.adp-social-wrap h1{margin-bottom:12px}
.adp-social-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
@media (max-width:1100px){.adp-social-grid{grid-template-columns:1fr}}
.adp-social-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;box-shadow:0 6px 16px rgba(0,0,0,.05)}
.adp-social-card h2{margin:0 0 8px 0}
label{display:block;margin:10px 0 4px;color:#374151;font-size:13px}
textarea,input[type="text"],input[type="datetime-local"]{width:100%;padding:10px;border-radius:8px;border:1px solid #d1d5db}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid #d1d5db;background:#f9fafb;cursor:pointer}
.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dropzone{border:2px dashed #a7f3d0;background:#ecfdf5;padding:18px;border-radius:12px;text-align:center;color:#065f46}
.dropzone.drag{background:#d1fae5}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{width:92px;height:92px;border-radius:8px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.publish-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:12px}
.publish-row .buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.calendar{display:flex;flex-direction:column;gap:8px}
.cal-item{display:flex;gap:10px;align-items:center;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
.cal-item .date{font-weight:600;color:#065f46}
.cal-item.published{background:#f0fdf4;border-color:#bbf7d0}
.conflict-msg{color:#b91c1c;display:block;margin-top:4px}
.muted{color:#6b7280}
.hist{width:100%;border-collapse:collapse}
.hist th,.hist td{border:1px solid #e5e7eb;padding:8px;text-align:left;font-size:13px}
.connections{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid #d1fae5;background:#f0fdf4;color:#065f46;font-size:12px}
.pill.warn{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.link{border:0;background:transparent;color:#2563eb;cursor:pointer;text-decoration:underline;padding:0 6px}
/* Container */
.adp-social-app {
  max-width: 1100px;
}

/* Connection chips */
.adp-social-connections {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
}
.conn-chip {
  background: #f6f7f7; border: 1px solid #e2e4e7; border-radius: 999px;
  padding: 6px 10px; font-size: 12px; color: #333;
}

/* Blocks */
.adp-block { background:#fff; border:1px solid #e2e4e7; border-radius:8px; padding:14px; margin:12px 0; }
.adp-label { display:block; font-weight:600; margin-bottom:6px; }

/* Dropzone */
.adp-dropzone {
  border: 2px dashed #c7ccd1;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  background: #fbfbfc;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.adp-dropzone.is-dragover {
  border-color: #2271b1;
  background: #f0f7ff;
}
.dz-inner { display:grid; justify-items:center; gap:6px; }
.dz-icon { font-size: 36px; line-height: 1; }
.dz-text { color:#555; }
.dz-or { color:#777; font-size:12px; }

/* Thumbs */
.adp-image-list {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.adp-thumb {
  position: relative;
  border: 1px solid #e2e4e7; border-radius: 8px; overflow: hidden; background:#fff;
}
.adp-thumb img { width: 100%; height: 120px; object-fit: cover; display:block; }
.adp-thumb .adp-thumb-bar {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:6px; font-size:12px; background:#f7f7f7; border-top:1px solid #e2e4e7;
}
.adp-remove { color:#b32d2e; cursor:pointer; }
.adp-progress {
  position:absolute; inset:auto 6px 6px auto;
  background:#2271b1; color:#fff; padding:2px 6px; border-radius:6px; font-size:11px;
}
.adp-thumb.dragging { opacity:.6; }

/* Output grid */
.adp-output-grid {
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; margin-top:12px;
}
@media (max-width: 1024px) { .adp-output-grid { grid-template-columns:1fr; } }

.adp-inline-status { margin-left:8px; color:#2271b1; }
/* Optional: red badge for failed uploads (JS sets background inline too) */
.adp-progress.error { background:#b91c1c !important; }
#adp-social-history tbody tr .adp-load-draft { color:#2271b1; text-decoration:underline; cursor:pointer; }
/* Toolbar */
.adp-social-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:8px 0 12px;
}
.adp-social-toolbar .left{ display:flex; gap:8px; flex-wrap:wrap; }
.button-link-delete{ background:#fff; color:#b32d2e; border-color:#e2e4e7; }
.button-link-delete:hover{ color:#8a1f20; }

.adp-status-chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #e2e4e7; background:#f6f7f7; font-size:12px;
}
.adp-status-chip.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#065f46; }
.adp-status-chip.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.adp-status-chip.neutral{ background:#f6f7f7; }

.adp-count{ font-weight:400; opacity:.8; }
.adp-count.warn{ color:#b45309; }
.adp-count.over{ color:#b91c1c; font-weight:700; }

/* History action links */
#adp-social-history tbody tr .adp-load-draft,
#adp-social-history tbody tr .adp-delete-draft{
  color:#2271b1; text-decoration:underline; cursor:pointer;
}
#adp-social-history tbody tr .adp-delete-draft{ color:#b32d2e; }
/* Toolbar */
.adp-social-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:8px 0 12px;
}
.adp-social-toolbar .left{ display:flex; gap:8px; flex-wrap:wrap; }
.button-link-delete{ background:#fff; color:#b32d2e; border-color:#e2e4e7; }
.button-link-delete:hover{ color:#8a1f20; }

.adp-status-chip{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #e2e4e7; background:#f6f7f7; font-size:12px;
}
.adp-status-chip.ok{ background:#f0fdf4; border-color:#bbf7d0; color:#065f46; }
.adp-status-chip.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.adp-status-chip.neutral{ background:#f6f7f7; }

.adp-count{ font-weight:400; opacity:.8; }
.adp-count.warn{ color:#b45309; }
.adp-count.over{ color:#b91c1c; font-weight:700; }

/* Calendar actions */
.cal-item{ display:flex; gap:10px; align-items:center; border:1px solid #e5e7eb; border-radius:10px; padding:8px }
.cal-item .date{ font-weight:600; color:#065f46 }
.cal-item.published{ background:#f0fdf4; border-color:#bbf7d0 }
.flex-spacer{ flex:1 1 auto }
.cal-action{ color:#b32d2e; text-decoration:underline; cursor:pointer }

/* Post Status action links */
#adp-social-history tbody tr .adp-load-draft,
#adp-social-history tbody tr .adp-delete-draft{
  color:#2271b1; text-decoration:underline; cursor:pointer;
}
#adp-social-history tbody tr .adp-delete-draft{ color:#b32d2e; }
/* ==== Uploading polish & animation ==== */

/* Keep thumbs positioned for overlays */
.adp-thumb { position: relative; }

/* Badge: subtle pulse + shimmer */
.adp-progress {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: linear-gradient(90deg, #2271b1 0%, #2a7fc9 50%, #2271b1 100%);
  background-size: 200% 100%;
  color: #fff;
  box-shadow: 0 6px 14px rgba(34,113,177,.24);
  animation:
    adp-badge-pulse 1.4s ease-in-out infinite,
    adp-badge-shimmer 1.6s linear infinite;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Small spinner inside the badge */
.adp-progress::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255,255,255,.55);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: adp-spin .8s linear infinite;
}

/* Error badge overrides (no animation, bold red) */
.adp-progress.error {
  background: #b91c1c !important;
  box-shadow: 0 6px 14px rgba(185,28,28,.24);
  animation: none;
}
.adp-progress.error::before {
  display: none;
}

/* Image: soft skeleton shimmer while uploading.
   This kicks in for the temporary preview node we add (it has .adp-progress present).
   Uses :has(), supported by modern browsers (Chromium/Safari). */
.adp-thumb:has(.adp-progress) img {
  position: relative;
  filter: saturate(.8) contrast(.95);
}
.adp-thumb:has(.adp-progress)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,0) 80%
    );
  background-size: 200% 100%;
  animation: adp-skeleton 1.4s ease-in-out infinite;
  pointer-events: none;
  border-radius: 2px;
}

/* Keyframes */
@keyframes adp-badge-pulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50%      { transform: translateZ(0) scale(1.05); }
}
@keyframes adp-badge-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes adp-spin {
  to { transform: rotate(360deg); }
}
@keyframes adp-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===============================
   Review & Approval – New styles
   =============================== */

/* Approval status chip shown near the main status chip */
.adp-review-chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e2e4e7;
  background:#f6f7f7;
  font-size:12px;
  line-height:1;
  vertical-align:middle;
}
.adp-review-chip.draft{
  background:#f6f7f7;
  border-color:#e2e4e7;
  color:#374151;
}
.adp-review-chip.pending{
  background:#fff7ed;
  border-color:#fed7aa;
  color:#9a3412;
}
.adp-review-chip.approved{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#065f46;
}

/* “Send for review” button (blue, like primary) */
.btn.send-review,
.button.send-review,
#btn-social-send-review.button{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}
.btn.send-review:hover,
.button.send-review:hover,
#btn-social-send-review.button:hover{
  filter:brightness(.95);
}
.btn.send-review[disabled],
.button.send-review[disabled],
#btn-social-send-review.button[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

/* Optional tiny note under disabled publish buttons when approval required */
.adp-approval-note{
  font-size:12px;
  color:#9a3412;
  margin-top:6px;
}

/* =========================================
   Mobile-friendly enhancements (appended)
   ========================================= */

/* Tablet: tighten grids and paddings */
@media (max-width: 900px){
  .grid2{ grid-template-columns:1fr; }
  .adp-image-list{ grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
  .adp-thumb img{ height:110px; }
  .adp-social-toolbar{ flex-direction:column; align-items:flex-start; gap:8px; }
  .adp-social-toolbar .left{ width:100%; }
  .adp-social-app{ padding:0 8px; }
}

/* Phone: stack everything cleanly with bigger tap targets */
@media (max-width: 600px){
  .adp-social-grid{ gap:12px; }
  .adp-social-card{ padding:12px; border-radius:10px; }
  label{ font-size:12px; margin:8px 0 4px; }
  textarea,
  input[type="text"],
  input[type="datetime-local"]{ padding:9px; font-size:14px; }
  .btn{ padding:12px 16px; font-size:14px; }
  .publish-row{ flex-direction:column; align-items:stretch; gap:10px; }
  .publish-row .buttons{ justify-content:flex-start; }
  .connections{ gap:6px; }
  .pill{ padding:5px 8px; font-size:11px; }

  /* Thumbs: two or three per row depending on space */
  .adp-image-list{ grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:8px; }
  .adp-thumb img{ height:100px; }

  /* Calendar + history tables become scrollable */
  .calendar{ gap:6px; }
  .hist{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
  .hist th, .hist td{ padding:10px; }

  /* Dropzone: larger text and easier tap */
  .adp-dropzone{ padding:16px; }
  .dz-icon{ font-size:30px; }
  .dz-text{ font-size:14px; }
  .dz-or{ font-size:12px; }

  /* Output areas stacked already at 1024, but tighten spacing on phones */
  .adp-output-grid{ gap:10px; }

  /* Calendar rows: allow wrap */
  .cal-item{ align-items:flex-start; gap:8px; }
  .cal-action{ padding:4px 0; }
}

/* Very small phones */
@media (max-width: 380px){
  .adp-image-list{ grid-template-columns: repeat(2, 1fr); }
  .adp-thumb img{ height:90px; }
  .btn{ width:100%; text-align:center; }
}