/* ---------- GRID & CARDS ---------- */
.ri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.ri-card {
  background: #0e0f13;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ri-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.ri-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

.ri-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0;
}

.ri-meta {
  font-size: 13px;
  color: #9fb2c9;
  margin-bottom: 12px;
}

.ri-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.ri-copy-btn,
.ri-details-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all .2s ease;
}

.ri-copy-btn {
  background: #1E8FFF;
  color: #ffffff;
}
.ri-copy-btn:hover {
  opacity: .9;
}

.ri-details-btn {
  background: rgba(255,255,255,0.05);
  color: #fff;
}
.ri-details-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* ---------- SINGLE PAGE (legacy one-column fallback) ---------- */
.ri-single {
  max-width: 760px;
  margin: auto;
  padding: 20px;
}

.ri-single h1 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #fff;
}

.ri-single .ri-meta {
  margin-bottom: 20px;
}

.ri-prompt-block {
  background: #111318;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  position: relative;
}

.ri-prompt-block pre {
  white-space: pre-wrap;
  color: #ffffff;
  font-size: 15px;
  margin: 0;
}

.ri-copy-inline {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1E8FFF;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- SEARCH & FILTER ---------- */
.ri-search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.ri-search-bar input,
.ri-search-bar select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0c0d11;
  color: #fff;
  flex: 1;
}

.ri-search-bar button {
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  background: #1E8FFF;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- RESPONSIVE GRID ---------- */
@media(max-width: 768px){
  .ri-grid { grid-template-columns: repeat(1, 1fr); }
}

/* ---------- Two-column single prompt layout ---------- */
.ri-single-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  max-width: 1200px;
  margin: 36px auto;
  padding: 20px;
  align-items: start;
}

/* Left col (image) */
.ri-col--image { display:flex; align-items:flex-start; justify-content:center; }
.ri-featured img { width:100%; height:auto; max-height:720px; object-fit:cover; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.03); }

/* Right col (content) */
.ri-col--content { color:#dfefff; }
.ri-header { margin-bottom:16px; }
.ri-title { font-size:34px; line-height:1.04; margin:0 0 10px; color:#ffffff; font-weight:800; }
.ri-meta-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; color:#9fb2c9; font-size:13px; }
.ri-badge { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(30,143,255,0.08); color:#dff; border:1px solid rgba(30,143,255,0.08); font-weight:700; font-size:12px; }
.ri-stat { color:#9fb2c9; font-weight:600; font-size:13px; }

/* top action buttons */
.ri-actions-top { display:flex; gap:10px; margin-bottom:14px; }
.ri-copy-inline,
.ri-open-modal {
  background: #1E8FFF;
  border:none; color: #ffffff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:800;
  box-shadow:0 12px 30px rgba(30,143,255,0.08);
}
.ri-open-modal { background: transparent; border:1px solid rgba(255,255,255,0.06); color:#fff; font-weight:700; }

/* prompt block */
.ri-prompt-block { background:#0e1114; border-radius:12px; padding:16px; border:1px solid rgba(255,255,255,0.04); margin-bottom:14px; position:relative; }
.ri-prompt-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:15px; color:#e6f5ff; white-space:pre-wrap; }

/* sections */
.ri-section { margin-top:18px; }
.ri-subhead { font-size:16px; color:#fff; margin-bottom:8px; }
.ri-text { color:#aabdd3; font-size:14px; line-height:1.6; }

/* related grid inside single */
.ri-related-grid { margin-top:12px; }

/* RESPONSIVE SINGLE LAYOUT */
@media (max-width: 980px) {
  .ri-single-wrapper { grid-template-columns: 1fr; gap:18px; padding:16px; }
  .ri-featured img { max-height:420px; }
  .ri-title { font-size:26px; }
  .ri-actions-top { flex-direction:row; }
}

/* Modal overlay (ensure it always overlays everything, including footer) */
#ri-modal {
  position: fixed !important;
  inset: 0 !important;               /* top:0; right:0; bottom:0; left:0; */
  display: none;                     /* default hidden */
  align-items: center;
  justify-content: center;
  z-index: 9999999 !important;       /* very high so it sits above everything */
  background: rgba(2,6,12,0.85);
  -webkit-overflow-scrolling: touch;  /* smooth scrolling on iOS */
  padding: 18px;
}

/* Modal inner box */
#ri-modal .ri-modal-inner {
  width: 100%;
  max-width: 760px;
  box-sizing: border-box;
  background: linear-gradient(180deg,#0b0d11,#060709);
  border-radius: 14px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 20px 60px rgba(0,0,0,0.75);
  max-height: 92vh;                  /* keep it inside viewport */
  overflow: auto;
}

/* When visible, body should not scroll */
body.ri-modal-open {
  overflow: hidden !important;
  touch-action: none;
}

/* --------------------------
  Prompt vertical scroll + wrapping fixes
---------------------------*/

/* Make pre and prompt containers wrap long words instead of growing horizontally.
   Limit height and enable vertical scrolling (mobile-friendly) */

.ri-prompt-block,
.ri-section .ri-text {
  box-sizing: border-box;
  width: 100%;
}

/* Core prompt text (pre): allow wrapping, force vertical scroll when too tall */
.ri-prompt-block pre,
.ri-prompt-text {
  white-space: pre-wrap !important;        /* preserve newlines, wrap long lines */
  word-wrap: break-word !important;        /* break long words */
  overflow-wrap: anywhere !important;      /* aggressive wrap */
  max-width: 100% !important;              /* never exceed container */
  box-sizing: border-box !important;
  display: block;
  margin: 0;
  padding-right: 12px;                     /* prevent scrollbar overlap */
  max-height: 55vh;                        /* allow tall prompts but limit to viewport */
  overflow-y: auto !important;             /* vertical scroll if content exceeds max-height */
  overflow-x: hidden !important;           /* disable horizontal scroll */
  -webkit-overflow-scrolling: touch;       /* smooth scrolling on iOS */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
  font-size: 15px;
  line-height: 1.45;
  color: #e6f5ff;
  background: transparent;
}

/* If you use plain divs for "Works best with" or "Common mistakes" ensure those can wrap and scroll */
.ri-section .ri-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  max-height: 36vh;
  overflow-y: auto;
  padding-right: 10px;
  color: #aabdd3;
  line-height: 1.6;
}

/* Make lists in How-it-works visible and spaced properly */
.ri-section .ri-text ul,
.ri-section .ri-text ol,
.ri-how-list ul,
.ri-how-list li {
  white-space: normal;
  word-break: break-word;
  margin: 0 0 10px 18px;
  padding: 0;
  line-height: 1.5;
  color: #aabdd3;
}

/* Example: ensure small screens keep the prompt readable */
@media (max-width: 780px) {
  .ri-prompt-block pre,
  .ri-prompt-text {
    max-height: 50vh;
    font-size: 14px;
  }
  .ri-section .ri-text { max-height: 36vh; }
}

/* Small visual hint for scrollable areas */
.ri-prompt-block pre::-webkit-scrollbar,
.ri-section .ri-text::-webkit-scrollbar {
  width: 8px;
}
.ri-prompt-block pre::-webkit-scrollbar-thumb,
.ri-section .ri-text::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}

/* --- Single prompt two-column layout --- */
.ri-single-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  align-items: start;
}

.ri-col--image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ri-featured img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  max-height: 700px;
  object-fit: cover;
}

.ri-col--content {
  color: #dfefff;
}
.ri-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 12px;
  font-weight: 800;
  color: #fff;
}
.ri-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #9fb2c9;
}
.ri-badge {
  padding: 6px 12px;
  background: rgba(30,143,255,0.08);
  border: 1px solid rgba(30,143,255,0.2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  color: #dff;
}
.ri-stat {
  font-weight: 600;
  color: #9fb2c9;
}

/* prompt block */
.ri-prompt-block {
  background: #0e1114;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 16px;
  margin-bottom: 20px;
  position: relative;
}
.ri-prompt-block pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 55vh;
  font-size: 15px;
  color: #e6f5ff;
}
.ri-copy-inline {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1E8FFF;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* sections */
.ri-section { margin-top: 24px; }
.ri-subhead {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}
.ri-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  color: #aabdd3;
}

/* related prompts */
.ri-related-grid {
  margin-top: 24px;
}

/* responsive */
@media (max-width: 980px) {
  .ri-single-wrapper {
    grid-template-columns: 1fr;
  }
  .ri-title { font-size: 26px; }
}

/* RI Controls — grid layout: 50% | 15% | 15% | 20% */
.ri-controls {
  display: grid;
  
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
form.ri-search-form {
    display: contents;
}
/* Each control wrapper */
.ri-control { display:flex; flex-direction:column; gap:6px; }
.ri-label { font-size:12px; color:#9fb2c9; font-weight:700; }

/* Search input */
#ri-search {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0b0c10;
  color: #e6f5ff;
  font-size:14px;
  width:100%;
  box-sizing:border-box;
  outline: none;
}
#ri-search::placeholder { color: #6f8599; }

/* Selects */
.ri-control select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0b0c10;
  color: #e6f5ff;
  font-size:14px;
  width:100%;
  box-sizing:border-box;
  outline: none;
}

/* Action buttons */
.ri-action-row { display:flex; gap:8px; justify-content:flex-end; }
.ri-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight:800;
  background: #1E8FFF;
  color: #ffffff;
}
.ri-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: #e6f5ff;
  font-weight:700;
}

/* Focus state for accessibility */
#ri-search:focus, .ri-control select:focus, .ri-btn:focus {
  box-shadow: 0 8px 30px rgba(30,143,255,0.08);
  border-color: rgba(30,143,255,0.32);
}

/* Small screens: stack controls */
@media (max-width: 820px) {
  .ri-controls {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .ri-action-row { justify-content: flex-start; }
}

/* --- Improved Controls Layout --- */
.ri-controls-wrapper {
  width: 100%;
  margin-bottom: 24px;
  padding: 0 20px;
}
.ri-controls-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  margin: auto;
}

.ri-control-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ri-control-search {
  flex: 1;
}

.ri-control-search input#ri-search {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0a0b0e;
  color: #e6f5ff;
  font-size: 15px;
}

.ri-control-filters select {
  padding: 10px 14px;
  border-radius: 10px;
  background: #0a0b0e;
  color: #e6f5ff;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
}

.ri-control-actions .ri-btn,
.ri-control-actions .ri-btn-secondary {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.ri-btn {
  background: #1E8FFF;
  color: #ffffff;
  border: none;
}
.ri-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #e6f5ff;
}

.ri-btn:hover,
.ri-btn-secondary:hover {
  opacity: .9;
}

@media (max-width: 820px) {
  .ri-controls-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .ri-control-group {
    width: 100%;
  }
  .ri-control-filters select,
  .ri-control-search input,
  .ri-btn,
  .ri-btn-secondary {
    width: 100%;
  }
}

.ri-search-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.ri-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.ri-controls input,
.ri-controls select {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0c0d11;
  color: #fff;
}

.ri-controls button {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: #1E8FFF;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

#ri-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* Search Page Layout */
.ri-search-page {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.ri-controls {
  background: #0e0f13;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.ri-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ri-controls input,
.ri-controls select {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #0c0d11;
  color: #fff;
}

.ri-controls button {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: #1E8FFF;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

/* Grid already exists, reuse */
#ri-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.ri-details-btn {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  text-align: center;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background 0.2s ease;
  display: inline-block;
}

.ri-details-btn:hover {
  background: rgba(255,255,255,0.15);
  text-decoration: none;
  color: #fff;
}