/* ==========================================================================
   MODULE-SPECIFIC STYLES
   ========================================================================== */

/* ---------------------------- Toolbar / filters row ------------------------ */
.toolbar{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.toolbar .input-icon-wrap{ flex: 1; min-width: 200px; max-width: 360px; }
.filter-bar{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-5); }
.filter-bar .divider-v{ height: 20px; }

/* ---------------------------- Prompt grid / cards --------------------------- */
.prompt-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: var(--space-4); }
.prompt-card{
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out); position: relative;
}
.prompt-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.prompt-card-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prompt-card-color{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.prompt-card-title{ font-weight: 620; font-size: var(--fs-sm); line-height: 1.3; flex: 1; }
.prompt-card-desc{ font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prompt-card-meta{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.prompt-card-foot{ display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.prompt-card-stats{ display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-tertiary); }
.prompt-card-stats span{ display: flex; align-items: center; gap: 4px; }
.prompt-card-stats svg{ width: 12px; height: 12px; }
.prompt-card-actions{ display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); }
.prompt-card:hover .prompt-card-actions{ opacity: 1; }
.prompt-card-pin{ position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; color: var(--ember); }
.prompt-card-pin svg{ width: 100%; height: 100%; }

/* ---------------------------- List view ------------------------------------- */
.prompt-list{ display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); }
.prompt-list-row{ display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background var(--dur-fast); }
.prompt-list-row:last-child{ border-bottom: none; }
.prompt-list-row:hover{ background: var(--bg-hover); }
.prompt-list-color{ width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.prompt-list-title{ font-weight: 560; font-size: var(--fs-sm); }
.prompt-list-desc{ font-size: 12px; color: var(--text-tertiary); }
.prompt-list-main{ flex: 1; min-width: 0; }
.prompt-list-tags{ display: flex; gap: 5px; flex-shrink: 0; }
.prompt-list-date{ font-size: 11.5px; color: var(--text-tertiary); width: 84px; flex-shrink: 0; text-align: right; }
.prompt-list-actions{ display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); flex-shrink: 0; }
.prompt-list-row:hover .prompt-list-actions{ opacity: 1; }

/* ---------------------------- Compact view ----------------------------------- */
.prompt-compact{ display: flex; flex-direction: column; gap: 2px; }
.prompt-compact-row{ display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.prompt-compact-row:hover{ background: var(--bg-hover); }
.prompt-compact-dot{ width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.prompt-compact-title{ font-size: var(--fs-sm); flex: 1; }
.prompt-compact-cat{ font-size: 11px; color: var(--text-tertiary); }

/* ---------------------------- Editor ------------------------------------------ */
/* minmax(0,1fr) is required: a plain 1fr column refuses to shrink below its
   content, which is what pushed the sidebar fields outside the dialog. */
.editor-layout{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-6); align-items: start; }
.editor-main{ display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
/* Deliberately NOT sticky: the sidebar is taller than a short viewport, and a
   sticky element taller than its scrollport can never be scrolled to the end. */
.editor-side{ display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.editor-side .select, .editor-side .input{ width: 100%; max-width: 100%; }
.editor-title-input{ font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; background: none; border: none; color: var(--text-primary); width: 100%; padding: 0; letter-spacing: var(--tracking-tight); }
.editor-title-input:focus{ outline: none; }
.editor-title-input::placeholder{ color: var(--text-disabled); }
.editor-desc-input{ background: none; border: none; color: var(--text-secondary); width: 100%; font-size: var(--fs-sm); resize: none; }
.editor-desc-input:focus{ outline: none; }
.editor-body-wrap{ position: relative; }
.editor-toolbar .btn{ flex: 0 0 auto; }
.editor-toolbar-spacer{ flex: 1 1 auto; min-width: 0; }
.editor-body{ min-height: clamp(150px, 30vh, 320px); max-width: 100%; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; color: var(--text-primary); width: 100%; resize: vertical; }
.editor-body:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.editor-body::placeholder{ color: var(--text-tertiary); }
.editor-toolbar{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--border-default); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-surface-2); }
.editor-toolbar + .editor-body{ border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.editor-stats-row{ display: flex; align-items: center; gap: var(--space-4); font-size: 11.5px; color: var(--text-tertiary); flex-wrap: wrap; }
.editor-stats-row b{ color: var(--text-secondary); font-weight: 620; }
.editor-side .card{ padding: var(--space-4); }
.editor-side-title{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-tertiary); margin-bottom: 10px; }
.var-pill-list{ display: flex; flex-wrap: wrap; gap: 6px; }
.varfill-preview{ max-height: min(420px, 45vh); }

/* ---------------------------- Prompt blocks (drag/drop builder) --------------- */
.block-list{ display: flex; flex-direction: column; gap: 8px; }
.block-item{ background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); display: flex; gap: 10px; align-items: flex-start; cursor: grab; }
.block-item.dragging{ opacity: 0.4; }
.block-item.drag-over{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.block-handle{ color: var(--text-tertiary); cursor: grab; padding-top: 3px; }
.block-handle svg{ width: 14px; height: 14px; }
.block-body{ flex: 1; }
.block-label-row{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.block-label{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); display: flex; align-items: center; gap: 6px; }
.block-textarea{ width: 100%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text-primary); resize: vertical; min-height: 52px; font-family: var(--font-mono); }
.block-textarea:focus{ outline: none; border-color: var(--accent); }
.block-remove{ color: var(--text-tertiary); cursor: pointer; padding: 3px; }
.block-remove:hover{ color: var(--danger-500); }

/* ---------------------------- Analytics charts --------------------------------- */
.chart-card{ background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.chart-card-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.chart-card-head h3{ font-size: var(--fs-sm); font-weight: 650; }
.chart-legend{ display: flex; gap: var(--space-3); flex-wrap: wrap; }
.chart-legend-item{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); }
.chart-legend-dot{ width: 8px; height: 8px; border-radius: 2px; }
.bar-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-row-label{ width: 110px; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row-track{ flex: 1; height: 9px; border-radius: var(--radius-full); background: var(--bg-surface-3); overflow: hidden; }
.bar-row-fill{ height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transition: width var(--dur-slow) var(--ease-out); }
.bar-row-value{ width: 34px; text-align: right; font-size: 11.5px; color: var(--text-tertiary); font-weight: 600; flex-shrink: 0; }

/* ---------------------------- Activity feed ------------------------------------- */
.activity-list{ display: flex; flex-direction: column; }
.activity-row{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.activity-row:last-child{ border-bottom: none; }
.activity-icon{ width: 30px; height: 30px; border-radius: 50%; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.activity-icon svg{ width: 13px; height: 13px; }
.activity-main{ flex: 1; min-width: 0; }
.activity-text{ font-size: var(--fs-sm); }
.activity-text b{ font-weight: 620; }
.activity-time{ font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------------------------- Folders / collections tree ------------------------- */
.folder-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.folder-card{ background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; transition: all var(--dur-fast); display: flex; flex-direction: column; gap: var(--space-3); }
.folder-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.folder-card-top{ display: flex; align-items: center; justify-content: space-between; }

/* ---------------------------- Settings page ---------------------------------------- */
.settings-grid{ display: grid; grid-template-columns: 220px 1fr; gap: var(--space-7); align-items: start; }
.settings-nav{ display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.settings-nav button{ text-align: left; background: none; border: none; padding: 9px 12px; border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--fs-sm); cursor: pointer; }
.settings-nav button:hover{ background: var(--bg-hover); }
.settings-nav button.active{ background: var(--bg-active); color: var(--text-primary); font-weight: 600; }
.settings-panel{ display: none; flex-direction: column; gap: var(--space-4); }
.settings-panel.active{ display: flex; }
.settings-row{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); gap: var(--space-4); }
.settings-row-text h4{ font-size: var(--fs-sm); font-weight: 600; }
.settings-row-text p{ font-size: 12px; color: var(--text-tertiary); margin-top: 2px; max-width: 420px; }
.accent-swatches{ display: flex; gap: 10px; }

@media (max-width: 900px){
  .settings-grid{ grid-template-columns: 1fr; }
  .settings-nav{ flex-direction: row; overflow-x: auto; position: static; padding-bottom: 4px; }
  .editor-layout{ grid-template-columns: minmax(0, 1fr); }
}

/* The editor lives inside a dialog, so it must react to the DIALOG width.
   Container queries do that correctly at every window size. */
@container modalbody (max-width: 760px){
  .editor-layout{ grid-template-columns: minmax(0, 1fr); }
}
@container modalbody (max-width: 620px){
  .grid-cols-2, .grid-cols-3, .grid-cols-4{ grid-template-columns: minmax(0, 1fr); }
  .varfill-preview{ max-height: min(320px, 40vh); }
}
/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size){
  @media (max-width: 1120px){ .editor-layout{ grid-template-columns: minmax(0, 1fr); } }
}

/* Short screens (mobile landscape): shrink the tall bits so nothing is clipped. */
@media (max-height: 620px){
  .editor-body{ min-height: 140px; }
  .varfill-preview{ max-height: 40vh; }
  .block-textarea{ min-height: 44px; }
}

/* ---------------------------- Quality analyzer ---------------------------------- */
.quality-score-ring{ width: 84px; height: 84px; position: relative; flex-shrink: 0; }
.quality-score-ring svg{ transform: rotate(-90deg); }
.quality-score-num{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.quality-score-num b{ font-family: var(--font-display); font-size: var(--fs-lg); }
.quality-score-num span{ font-size: 9px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.quality-check-row{ display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--fs-sm); }
.quality-check-icon{ width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quality-check-icon svg{ width: 11px; height: 11px; }
.quality-check-icon.pass{ background: rgba(52,211,153,0.16); color: var(--success-500); }
.quality-check-icon.fail{ background: rgba(245,165,36,0.16); color: var(--warning-500); }

/* ---------------------------- Version history ------------------------------------ */
.version-list{ display: flex; flex-direction: column; gap: 2px; }
.version-row{ display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-md); cursor: pointer; }
.version-row:hover{ background: var(--bg-hover); }
.version-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
.version-row.current .version-dot{ background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.version-main{ flex: 1; }
.version-diff{ font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; background: var(--bg-surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.diff-add{ background: rgba(52,211,153,0.16); color: var(--success-500); text-decoration: none; }
.diff-del{ background: rgba(248,113,113,0.16); color: var(--danger-500); text-decoration: line-through; }

/* ---------------------------- Persona / model cards ------------------------------- */
.persona-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--space-4); }
.persona-card{ background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.persona-card-top{ display: flex; align-items: center; gap: 10px; }
.persona-avatar{ width: 38px; height: 38px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); color: #fff; flex-shrink: 0; }

/* ---------------------------- Trash banner --------------------------------------- */
.trash-banner{ display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); color: var(--danger-500); font-size: var(--fs-sm); margin-bottom: var(--space-5); }
.trash-banner svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---------------------------- Onboarding hero ------------------------------------- */
.welcome-hero{ position: relative; border-radius: var(--radius-2xl); padding: var(--space-8); margin-bottom: var(--space-6); overflow: hidden; background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%); border: 1px solid var(--border-subtle); }
.welcome-hero::before{ content: ""; position: absolute; top: -60%; right: -10%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--hue-violet)/0.22), transparent 65%); filter: blur(10px); }
.welcome-hero::after{ content: ""; position: absolute; bottom: -80%; left: 10%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, hsl(var(--hue-ember)/0.16), transparent 65%); }
.welcome-hero-content{ position: relative; max-width: 560px; }
.welcome-hero h1{ font-size: var(--fs-2xl); margin-bottom: 8px; }
.welcome-hero p{ color: var(--text-secondary); margin-bottom: var(--space-5); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* ---------------------------- Print (PDF export) ---------------------------------- */
@media print{
  .sidebar, .topbar, .toast-stack{ display: none !important; }
  #app{ display: block; }
  .main{ height: auto; }
  .view-body{ overflow: visible; padding: 0; }
}