/* ============================================================
   V1Ron Gen Library — Universal CSS v2.8.6
   v1rgl-* class namespace used in both Chat and Studio.
   Dark theme activated by .v1rgl-dark on the grid element.
   ============================================================ */

/* Grid */
.v1rgl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.2) transparent;
}

/* Card — light default */
.v1rgl-card {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: box-shadow .18s, transform .18s;
}
.v1rgl-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
.v1rgl-card.is-open { outline: 2px solid #6366f1; outline-offset: 1px; }

.v1rgl-thumb-wrap { position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; background: #f3f4f6; }
.v1rgl-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
video.v1rgl-thumb { aspect-ratio: 16/9; height: auto; }

.v1rgl-badge { position: absolute; top: 5px; left: 5px; font-size: 14px; line-height: 1; }
.v1rgl-card-actions { position: absolute; top: 4px; right: 4px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.v1rgl-card:hover .v1rgl-card-actions { opacity: 1; }

.v1rgl-btn {
  background: rgba(0,0,0,.6); border: none; border-radius: 5px;
  color: #fff; font-size: 11px; padding: 3px 6px; cursor: pointer;
}
.v1rgl-del-btn:hover { background: rgba(220,38,38,.75); }

.v1rgl-card-info { padding: 6px 8px; }
.v1rgl-card-name {
  font-size: 12px; font-weight: 500; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: text;
}
.v1rgl-card-name input {
  background: transparent; border: none; border-bottom: 1px solid #6366f1;
  color: inherit; font-size: inherit; outline: none; padding: 1px 2px; width: 100%;
}
.v1rgl-card-sub { font-size: 10px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Accordion detail row */
.v1rgl-detail-row {
  grid-column: 1 / -1;
  background: #f8f8ff;
  border: 1px solid #e0e0f0;
  border-radius: 10px;
  display: flex;
  gap: 14px;
  padding: 14px;
  margin: 2px 0 6px;
  animation: v1rglFadeIn .18s ease;
}
@keyframes v1rglFadeIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }

.v1rgl-detail-left { flex-shrink: 0; width: 150px; display: flex; flex-direction: column; gap: 8px; }
.v1rgl-detail-media { width: 150px; height: 150px; object-fit: cover; border-radius: 7px; display: block; border: 1px solid #dde; }
.v1rgl-detail-img { cursor: zoom-in; }
.v1rgl-download-btn {
  display: block; text-align: center; font-size: 11px; padding: 5px;
  background: #eef2ff; border: 1px solid #a5b4fc; border-radius: 6px;
  color: #4338ca; text-decoration: none;
}
.v1rgl-download-btn:hover { background: #e0e7ff; }

.v1rgl-detail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.v1rgl-detail-close {
  position: absolute; top: 0; right: 0;
  background: none; border: none; font-size: 11px; color: #9ca3af; cursor: pointer; padding: 0;
}
.v1rgl-detail-close:hover { color: #374151; }

.v1rgl-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #6b7280; }
.v1rgl-prompt-details { font-size: 11px; color: #9ca3af; }
.v1rgl-prompt-details summary { cursor: pointer; }
.v1rgl-prompt-body { margin-top: 4px; color: #9ca3af; word-break: break-word; line-height: 1.5; }

.v1rgl-section { display: flex; flex-direction: column; gap: 4px; }
.v1rgl-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.v1rgl-label-hint { font-size: 10px; color: #9ca3af; font-weight: 400; text-transform: none; }
.v1rgl-hint { font-size: 10px; color: #9ca3af; }
.v1rgl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.v1rgl-name-inp {
  flex: 1; min-width: 100px; font-size: 12px; padding: 5px 8px;
  border: 1px solid #d1d5db; border-radius: 5px; background: #fff; color: #111827;
}
.v1rgl-name-inp:focus { outline: none; border-color: #6366f1; }
.v1rgl-save-name {
  font-size: 11px; padding: 5px 12px; border-radius: 5px;
  border: 1px solid #d1d5db; background: #fff; color: #374151; cursor: pointer;
}
.v1rgl-save-name:hover { background: #f0fdf4; border-color: #86efac; color: #166534; }
.v1rgl-save-name-status { font-size: 11px; color: #059669; }

.v1rgl-use-as-ref {
  font-size: 12px; padding: 5px 14px; border-radius: 6px;
  border: 1px solid #a5b4fc; background: #eef2ff; color: #4338ca;
  cursor: pointer; font-weight: 600;
}
.v1rgl-use-as-ref:hover { background: #e0e7ff; }
.v1rgl-ref-status { font-size: 11px; color: #059669; }

.v1rgl-linked-mems { display: flex; flex-wrap: wrap; gap: 4px; }
.v1rgl-no-mems { font-size: 11px; color: #9ca3af; font-style: italic; }
.v1rgl-linked-mem {
  display: inline-flex; align-items: center; gap: 4px;
  background: #ede9fe; border: 1px solid #c4b5fd;
  border-radius: 5px; padding: 2px 7px; font-size: 11px; color: #5b21b6;
}
.v1rgl-linked-mem-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v1rgl-unlink-mem { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 11px; padding: 0; }
.v1rgl-unlink-mem:hover { color: #dc2626; }

.v1rgl-mem-search {
  width: 100%; box-sizing: border-box; padding: 4px 8px; font-size: 11px;
  border: 1px solid #d1d5db; border-radius: 5px; background: #fff; color: #374151; margin-bottom: 2px;
}
.v1rgl-mem-search:focus { outline: none; border-color: #a5b4fc; }
.v1rgl-mem-list { max-height: 140px; overflow-y: auto; }
.v1rgl-mem-empty { font-size: 11px; color: #9ca3af; font-style: italic; }
.v1rgl-mem-row { display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-bottom: 1px solid #f3f4f6; }
.v1rgl-mem-row.is-linked { background: #f5f3ff; }
.v1rgl-mem-text { flex: 1; font-size: 11px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v1rgl-link-mem {
  flex-shrink: 0; font-size: 10px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid #d1d5db; background: #fff; cursor: pointer; color: #374151;
}
.v1rgl-link-mem:hover { background: #ede9fe; border-color: #8b5cf6; color: #7c3aed; }
.v1rgl-unlink-mem-row {
  flex-shrink: 0; font-size: 10px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid #fca5a5; background: #fff7f7; cursor: pointer; color: #dc2626;
}
.v1rgl-unlink-mem-row:hover { background: #fee2e2; }

/* ── Dark theme (Studio) ─────────────────────────────────────── */
.v1rgl-dark.v1rgl-grid { /* scoped to dark grid */ }
.v1rgl-dark .v1rgl-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.v1rgl-dark .v1rgl-card:hover { border-color: rgba(100,210,200,.45); }
.v1rgl-dark .v1rgl-card.is-open { outline-color: rgba(100,210,200,.7); }
.v1rgl-dark .v1rgl-thumb-wrap { background: rgba(255,255,255,.05); }
.v1rgl-dark .v1rgl-card-name { color: #f0ece4; }
.v1rgl-dark .v1rgl-card-name input { border-bottom-color: rgba(100,210,200,.5); }
.v1rgl-dark .v1rgl-card-sub { color: rgba(240,236,228,.4); }
.v1rgl-dark .v1rgl-detail-row { background: rgba(255,255,255,.04); border-color: rgba(100,210,200,.2); }
.v1rgl-dark .v1rgl-detail-close { color: rgba(240,236,228,.35); }
.v1rgl-dark .v1rgl-detail-close:hover { color: rgba(240,236,228,.8); }
.v1rgl-dark .v1rgl-meta { color: rgba(240,236,228,.45); }
.v1rgl-dark .v1rgl-label { color: rgba(240,236,228,.4); }
.v1rgl-dark .v1rgl-label-hint, .v1rgl-dark .v1rgl-hint { color: rgba(240,236,228,.3); }
.v1rgl-dark .v1rgl-prompt-details, .v1rgl-dark .v1rgl-prompt-body { color: rgba(240,236,228,.4); }
.v1rgl-dark .v1rgl-name-inp { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #f0ece4; }
.v1rgl-dark .v1rgl-name-inp:focus { border-color: rgba(100,210,200,.5); }
.v1rgl-dark .v1rgl-save-name { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); color: #f0ece4; }
.v1rgl-dark .v1rgl-save-name:hover { background: rgba(100,210,200,.15); border-color: rgba(100,210,200,.4); }
.v1rgl-dark .v1rgl-save-name-status { color: rgba(100,210,200,.9); }
.v1rgl-dark .v1rgl-use-as-ref { background: rgba(100,210,200,.1); border-color: rgba(100,210,200,.35); color: #7fe4d8; }
.v1rgl-dark .v1rgl-use-as-ref:hover { background: rgba(100,210,200,.2); }
.v1rgl-dark .v1rgl-ref-status { color: rgba(100,210,200,.9); }
.v1rgl-dark .v1rgl-download-btn { background: rgba(100,210,200,.1); border-color: rgba(100,210,200,.25); color: #7fe4d8; }
.v1rgl-dark .v1rgl-download-btn:hover { background: rgba(100,210,200,.2); }
.v1rgl-dark .v1rgl-linked-mem { background: rgba(139,92,246,.15); border-color: rgba(139,92,246,.3); color: #c4b5fd; }
.v1rgl-dark .v1rgl-unlink-mem { color: rgba(240,236,228,.3); }
.v1rgl-dark .v1rgl-no-mems, .v1rgl-dark .v1rgl-mem-empty { color: rgba(240,236,228,.3); }
.v1rgl-dark .v1rgl-mem-search { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #f0ece4; }
.v1rgl-dark .v1rgl-mem-search:focus { border-color: rgba(100,210,200,.4); }
.v1rgl-dark .v1rgl-mem-row { border-bottom-color: rgba(255,255,255,.05); }
.v1rgl-dark .v1rgl-mem-row.is-linked { background: rgba(139,92,246,.08); }
.v1rgl-dark .v1rgl-mem-text { color: rgba(240,236,228,.65); }
.v1rgl-dark .v1rgl-link-mem { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(240,236,228,.7); }
.v1rgl-dark .v1rgl-link-mem:hover { background: rgba(139,92,246,.2); border-color: rgba(139,92,246,.4); color: #c4b5fd; }
.v1rgl-dark .v1rgl-unlink-mem-row { background: rgba(248,113,113,.06); border-color: rgba(248,113,113,.3); color: #fca5a5; }
.v1rgl-dark .v1rgl-unlink-mem-row:hover { background: rgba(248,113,113,.15); }