/* ── Prompts ──────────────────────────────────────────────── */

/* Layout: list panel + optional side viewer (mirrors Notes layout) */
.prompts-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.prompts-layout.has-viewer {
  grid-template-columns: 1fr 420px;
  gap: var(--space-5);
}
.prompts-list-panel { min-width: 0; }

/* Viewer panel — reuses note-editor-panel visual style */
.prompt-viewer-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 500px;
  overflow: hidden;
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 120px);
}

/* Full-body display in the viewer (no height cap, scrollable) */
.viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-darkest);
}

/* Full-body prompt text label for accessibility / copy target */
.prompt-body-full {
  /* intentionally unstyled beyond .viewer-body — the panel is the container */
}

.prompts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.prompt-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  animation: scaleIn 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.prompt-card:hover,
.prompt-card:focus-within { border-color: var(--bg-hover); transform: translateY(-2px); }
.prompt-card.active { border-color: var(--accent); }


.prompt-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.prompt-title { font-size: var(--text-sm); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-cat {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  flex-shrink: 0;
}

/* Body preview */
.prompt-body-wrap {
  position: relative;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prompt-body {
  overflow: auto;
  max-height: 200px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: var(--space-4);
  background: var(--bg-darkest);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}
.prompt-modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); }

/* Copy button overlay (shared style with snippets) */
.prompt-card:hover .copy-btn-overlay,
.prompt-card:focus-within .copy-btn-overlay { opacity: 1; }

/* Footer */
.prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.prompt-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.prompt-tag {
  padding: 1px var(--space-2);
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-muted);
}
.prompt-date { font-size: 11px; color: var(--text-muted); }

/* Category colors */
.cat-writing    { background: rgba(88,101,242,0.15);  color: #8b97ff; }
.cat-coding     { background: rgba(247,223,30,0.15);  color: #f7df1e; }
.cat-analysis   { background: rgba(0,168,252,0.15);   color: var(--text-link); }
.cat-creative   { background: rgba(235,69,158,0.15);  color: #eb459e; }
.cat-business   { background: rgba(35,165,89,0.15);   color: #3ec17a; }
.cat-marketing  { background: rgba(240,178,50,0.15);  color: var(--warning); }
.cat-education  { background: rgba(0,173,216,0.15);   color: #00add8; }
.cat-personal   { background: rgba(149,149,149,0.15); color: #949ba4; }
.cat-other      { background: var(--bg-hover); color: var(--text-muted); }

@media (max-width: 640px) {
  .prompts-grid { grid-template-columns: minmax(0, 1fr); }
  .prompts-layout.has-viewer { grid-template-columns: 1fr; }
  .prompt-viewer-panel { min-height: 420px; position: static; max-height: none; }
  .prompt-header { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .prompt-title { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .copy-btn-overlay { opacity: 1; }
  .prompt-footer { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
}

@media (hover: none), (pointer: coarse) {
  .copy-btn-overlay { opacity: 1; }
  .prompt-card:hover { transform: none; }
}