.ai-card {
    background:#fff;
    border:1px solid #e1e1e1;
    padding:20px;
    margin-bottom:30px;
    border-radius:4px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.ai-card header{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.ai-card .ai-select {
  float: left;
  margin-right: 8px;
  transform: scale(1.2);
}

.dashicons.dashicons-clock {
  color:#888;
  font-size:18px;
}

.thumb-image {
    width: 250px;
    height: auto;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Image looks clickable */
.ai-card .ai-media-link { display:inline-block; border-radius:4px; overflow:hidden; }
.ai-card .ai-media-link .thumb-image { display:block; max-width:220px; height:auto; cursor:pointer; }

/* Skip-existing disables selection, but keep the card fully visible */
.ai-card.ai-disabled { opacity: 1; }
.ai-card.ai-disabled .ai-select { opacity:.5; cursor:not-allowed; }

/* Across-pages: dim controls, keep links clickable */
.ai-card.ai-frozen { opacity:.85; }
.ai-card.ai-frozen .ai-select,
.ai-card.ai-frozen .button,
.ai-card.ai-frozen .ai-prompt-select,
.ai-card.ai-frozen .ai-prompt-input,
.ai-card.ai-frozen .alt-text-input { pointer-events:none; opacity:.5; }

/* Still allow clicking the image/title links while frozen */
.ai-card.ai-frozen a { pointer-events:auto; }

/* Make image wrapper a positioning context */
.ai-card .ai-media-link {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
}

/* Ensure the image fills the link box nicely */
.ai-card .ai-media-link .thumb-image {
    display: block;
    max-width: 220px;      /* adjust to your layout */
    height: auto;
    cursor: pointer;
}

/* Small arrow badge (Dashicons external link glyph) */
.ai-card .ai-media-link::after {
    content: "\f504";             /* dashicons-external */
    font-family: dashicons;
    font-size: 14px;
    line-height: 18px;
    width: 18px;
    height: 18px;
    text-align: center;

    position: absolute;
    top: 6px;
    right: 6px;

    color: #fff;
    background: rgba(0,0,0,.55);
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);

    opacity: .9;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease;
}

/* Hover state = a touch brighter + lift */
.ai-card .ai-media-link:hover::after {
    opacity: 1;
    transform: translateY(-1px);
}

/* If a card is "disabled" or "frozen", keep link usable */
.ai-card.ai-disabled .ai-media-link,
.ai-card.ai-frozen .ai-media-link {
    pointer-events: auto;
}

/* But dim *controls*, not the image/link */
.ai-card.ai-disabled .ai-select { opacity: .5; cursor: not-allowed; }
.ai-card.ai-frozen  .ai-select,
.ai-card.ai-frozen  .button,
.ai-card.ai-frozen  .ai-prompt-select,
.ai-card.ai-frozen  .ai-prompt-input,
.ai-card.ai-frozen  .alt-text-input { pointer-events: none; opacity: .5; }

.ai-credit-badge {
    background: #c91f8a;
    color: #fff;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 12px;
    vertical-align: middle;
    display: inline-block;
}

.suggestion-block {
    background:#f3f4f5;padding:10px;border-radius:3px;display:flex;align-items:center;gap:8px;margin-bottom:20px;
}
 /* cards.css */