/* Workbench — brainstorm ideas (draft Projects, workbench=true) before
     they're promoted into a real one. Idea list reuses the Projects page's
     card layout (.project-card); this file adds only what's idea-specific.
     Buttons here are self-contained (not added to holo-theme.css's shared
     shimmer-button selector lists) — this app has no generic `.primary`
     fallback rule, every primary button is opted in by ID/class in either
     its own page CSS or those holo-theme lists, and missing a spot in the
     latter is exactly what broke the nav entry earlier. Copying the
     self-contained #projects-page-add-btn pattern instead means nothing
     here depends on remembering to update another file. */
  #workbench-page { flex: 1; overflow-y: auto; padding: 20px 28px; }

  #workbench-add-btn {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, #E4DDCE);
    border: none; color: #070605; font-weight: 700;
    border-radius: 7px; padding: 9px 14px; font-size: 12.5px; cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }
  #workbench-add-btn:hover { box-shadow: 0 6px 20px -4px rgba(62,90,76,0.65); transform: translateY(-1px); }
  #workbench-add-btn .icon-svg { color: currentColor; filter: none; }

  .idea-primary-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2) 55%, #E4DDCE);
    border: none; color: #070605; font-weight: 700;
    border-radius: 7px; padding: 9px 16px; font-size: 12.5px; cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
  }
  .idea-primary-btn:hover { box-shadow: 0 6px 20px -4px rgba(62,90,76,0.65); transform: translateY(-1px); }
  .idea-primary-btn:disabled { opacity: 0.6; cursor: default; }

  #new-idea-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,7,10,0.72);
    align-items: center;
    justify-content: center;
    z-index: 100;
  }
  #new-idea-overlay.visible { display: flex; }

  .idea-card { border-left: 2px solid rgba(245,184,79,0.5); }

  .idea-badge {
    background: rgba(245,184,79,0.15); color: var(--amber);
    vertical-align: middle;
  }
  .idea-badge .icon-svg { color: var(--amber); filter: none; width: 11px; height: 11px; }

  .idea-notes-preview {
    font-size: 12px; color: var(--text-dim); margin: 8px 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; white-space: pre-wrap; word-break: break-word; min-height: 16px;
  }

  /* Notes tab */
  #idea-notes-view { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
  #idea-notes-text {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    outline: none;
    font-family: inherit;
    resize: vertical;
    min-height: 300px;
  }
  #idea-notes-text:focus { border-color: var(--accent); }
  .idea-notes-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .idea-saved-hint { font-size: 11.5px; color: var(--green); }

  /* Diagram tab — read-only, the agent maintains it from workspace */
  #idea-diagram-view { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 20px 24px; gap: 12px; }
  #idea-diagram-view .sub a { color: var(--accent-2); }
  #idea-diagram-preview {
    flex: 1;
    min-height: 300px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #idea-diagram-preview svg { max-width: 100%; height: auto; }
  .idea-diagram-empty, .idea-diagram-error { font-size: 12.5px; color: var(--text-dim); text-align: center; }
  .idea-diagram-error { color: var(--red); }

  /* Dossier tab — agent-authored final writeup, markdown + inline Mermaid */
  #idea-dossier-view { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
  .idea-dossier-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .idea-dossier-toolbar .sub { flex: 1; min-width: 240px; }
  .idea-dossier-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .idea-dossier-actions button {
    display: flex; align-items: center; gap: 6px;
    background: var(--panel); border: 1px solid var(--border); color: var(--text);
    border-radius: 7px; padding: 8px 13px; font-size: 12.5px; cursor: pointer;
  }
  .idea-dossier-actions button:hover:not(:disabled) { border-color: var(--accent-2); }
  .idea-dossier-actions button:disabled { opacity: 0.5; cursor: default; }
  #idea-promote-btn { border-color: rgba(62,207,142,0.4); color: var(--green); }
  #idea-promote-btn:hover:not(:disabled) { background: rgba(62,207,142,0.12); border-color: var(--green); }
  #idea-dossier-content {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 18px 22px; font-size: 13px; line-height: 1.65;
  }
  #idea-dossier-content h1, #idea-dossier-content h2, #idea-dossier-content h3 { margin-top: 1.2em; }
  #idea-dossier-content h1:first-child, #idea-dossier-content h2:first-child, #idea-dossier-content h3:first-child { margin-top: 0; }
  .idea-dossier-diagram { display: flex; justify-content: center; padding: 14px 0; }
  .idea-dossier-diagram svg { max-width: 100%; height: auto; }

  /* Promote modal — mode tabs (New Project / Work Item) */
  #promote-idea-overlay {
    display: none; position: fixed; inset: 0; background: rgba(6,7,10,0.72);
    align-items: center; justify-content: center; z-index: 100;
  }
  #promote-idea-overlay.visible { display: flex; }
  .promote-idea-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
  .promote-idea-tabs button {
    flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 7px; padding: 8px 10px; font-size: 12.5px; cursor: pointer;
  }
  .promote-idea-tabs button.active { color: var(--text); border-color: var(--accent-2); background: rgba(139,166,140,0.12); }
  .promote-mode-choice { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 4px; }
  .promote-mode-choice label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 400; color: var(--text); cursor: pointer; }
  .promote-launch-check { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }