.ai-front-card,
.ai-front-card *{ box-sizing:border-box; }

.ai-front-card{
  margin-top:16px;
  border:1px solid rgba(127,127,127,.25);
  border-radius:14px;
  color:inherit;
  overflow:hidden;
  background: rgba(127,127,127,.06);
}

body.dark .ai-front-card,
body.theme-dark .ai-front-card,
html[data-theme="dark"] .ai-front-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.14);
}

.ai-front-head{
  display:flex;
  gap:14px;
  padding:14px;
  align-items:flex-start;
}

.ai-front-poster{
  width:230px;
  max-width:230px;
  height:auto;
  border-radius:12px;
  display:block;
  object-fit:cover;
  flex:0 0 auto;
}

.ai-front-body{ flex:1; min-width:0; }

.ai-front-title{
  margin:0 0 6px 0;
  font-size:18px;
  font-weight:700;
  line-height:1.25;
  color:inherit;
  word-break:break-word;
}

.ai-front-subtitle{
  opacity:.85;
  margin-top:-2px;
  margin-bottom:10px;
  font-size:14px;
  word-break:break-word;
}

/* Desktop grid */
.ai-front-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  margin-top:6px;
}

.ai-front-row{
  display:flex;
  gap:8px;
  align-items:baseline;
  min-width:0;
}

.ai-front-label{
  font-weight:600;
  white-space:nowrap;
  opacity:.9;
}

.ai-front-value{
  opacity:.95;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Genres */
.ai-front-genres{ margin-top:10px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.ai-front-label-inline{ font-weight:600; white-space:nowrap; opacity:.95; }
.ai-front-genres-chips{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; min-width:0; }

/* Linked genre chips */
.ai-genre-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(127,127,127,.25);
  text-decoration:none;
  color:inherit;
  background:rgba(127,127,127,.08);
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
  font-size:13px;
  line-height:1.2;
  max-width:100%;
}

body.dark .ai-genre-chip,
body.theme-dark .ai-genre-chip,
html[data-theme="dark"] .ai-genre-chip{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
}

.ai-genre-chip:hover{ opacity:.92; }

.ai-front-rating{ margin-top:8px; opacity:.95; }

.ai-front-desc{
  margin-top:10px;
  opacity:.9;
  line-height:1.65;
  word-break:break-word;
}

.ai-front-link{ margin-top:10px; }

/* ===== Responsive & readability ===== */

/* Stop truncation on smaller screens */
@media (max-width: 900px){
  .ai-front-card .ai-front-value{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    word-break:break-word !important;
  }
}

/* One column grid */
@media (max-width: 768px){
  .ai-front-grid{ grid-template-columns:1fr !important; }
}

/* Mobile layout */
@media (max-width: 640px){
  .ai-front-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .ai-front-poster{
    width:100% !important;
    max-width:320px !important;
    margin:0 auto !important;
  }

  /* Keep label + value on same line, allow wrapping */
  .ai-front-row{
    flex-direction:row !important;
    align-items:baseline !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .ai-front-label{
    white-space:nowrap !important;
    font-size:13px !important;
    opacity:.85 !important;
  }

  .ai-front-value{
    flex:1 1 auto !important;
    width:auto !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  /* Genres stays inline with chips */
  .ai-front-genres{
    flex-direction:row !important;
    align-items:baseline !important;
  }
}


/* FORCE Genres label + chips inline (StreamTube override fix) */
.ai-front-card .ai-front-genres{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

.ai-front-card .ai-front-genres .ai-front-label-inline{
  display:inline-block !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.ai-front-card .ai-front-genres .ai-front-genres-chips{
  display:inline-flex !important;
  flex:1 1 auto !important;
  flex-basis:auto !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}

/* If theme sets links to block, undo it for chips */
.ai-front-card .ai-front-genres .ai-front-genres-chips a.ai-genre-chip{
  display:inline-flex !important;
  width:auto !important;
}

/* Genres chips inside the value (prevents theme from forcing block layout) */
.ai-front-card .ai-front-row--genres .ai-front-genres-chips{
  display:inline-flex;
  flex-wrap:wrap;
  gap:8px;
  vertical-align:middle;
}