/* /dev-prompts/css/styles.css */

:root {
  /* Core Brand & UI Colors */
  --bg-base:     #030407;
  --bg-surface:  #0a0d14;
  --bg-elevated: #11151f;
  --border-dim:  #1f2533;
  --border-focus: rgba(46, 204, 138, 0.5);
  --accent:      #2ECC8A;
  --accent-glow: rgba(46, 204, 138, 0.4);
  --text-main:   #f0ede8;
  --text-muted:  #8b94a5;
  --error:       #ef4444;
  --error-bg:    #450a0a;

  /* VS Code Syntax Highlighting Tokens */
  --code-bg:        #1e1e1e;
  --token-tag:      #569cd6;   /* Blue */
  --token-attr:     #9cdcfe;   /* Light Blue */
  --token-string:   #ce9178;   /* Orange/Brown */
  --token-comment:  #6a9955;   /* Green */
  --token-keyword:  #c586c0;   /* Purple */
  --token-func:     #dcdcaa;   /* Yellow */
  --token-num:      #b5cea8;   /* Light Green */
  --token-selector: #d7ba7d;   /* Khaki */

  /* Spacing & Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --transition-fast:   0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   RESET & BASE
========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

/* Custom Scrollbars */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a3143; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3d475f; }

/* =========================================
   1. SECURITY & LOCK SCREEN
========================================= */
.lock-screen {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(3, 4, 7, 0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}

.lock-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-dim);
  padding: 3rem 2.5rem;
  border-radius: var(--r-lg);
  text-align: center;
  width: 100%; max-width: 420px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lock-card h2 { color: var(--text-main); margin-bottom: 0.75rem; font-weight: 600; letter-spacing: -0.02em; }
.lock-card p  { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.5; }

.pwd-wrapper { position: relative; margin-bottom: 1.5rem; }
.pwd-wrapper input {
  width: 100%; padding: 1rem 2.5rem 1rem 1.2rem;
  background: var(--bg-elevated); border: 1px solid var(--border-dim);
  color: var(--text-main); border-radius: var(--r-md); outline: none;
  font-family: 'Inter', sans-serif; font-size: 1rem;
  transition: var(--transition-smooth);
}
.pwd-wrapper input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.pwd-wrapper input.error-shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  border-color: var(--error);
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.eye-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  cursor: pointer; opacity: 0.5; transition: var(--transition-fast);
  user-select: none;
}
.eye-icon:hover { opacity: 1; }

.lock-card button {
  width: 100%; padding: 1rem; background: var(--accent); color: #000;
  font-size: 1rem; font-weight: 600; border: none; border-radius: var(--r-md);
  cursor: pointer; transition: var(--transition-smooth); letter-spacing: 0.02em;
}
.lock-card button:hover {
  background: #5fffb8; transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--accent-glow);
}

.error-msg { color: var(--error); font-size: 0.85rem; margin-top: 1rem; display: none; font-weight: 500; }

/* =========================================
   2. MAIN APP LAYOUT & SPLIT SCREEN
========================================= */
.app-container {
  width: 100%; height: 100%; display: flex; flex-direction: row;
  animation: fadeInApp 0.5s ease-out;
}

@keyframes fadeInApp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.left-panel {
  /* min-width reduced from 450px — prevents overflow on narrower desktops */
  width: 50%; min-width: 340px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg-surface); overflow: hidden;
}

.resizer {
  width: 6px; background: var(--bg-elevated);
  border-left: 1px solid var(--border-dim);
  border-right: 1px solid var(--border-dim);
  cursor: col-resize; flex-shrink: 0; z-index: 10;
  transition: background var(--transition-fast);
}
.resizer:hover,
.resizer.dragging { background: var(--accent); }

.right-panel {
  flex-grow: 1; display: flex; flex-direction: column;
  min-width: 280px; background: var(--bg-base); overflow: hidden;
}

/* =========================================
   3. PROMPTS SECTION & NAVIGATION
========================================= */
.prompts-section { flex: 1.5; display: flex; flex-direction: column; overflow: hidden; }

.tabs-header {
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border-dim);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-surface); flex-wrap: wrap; gap: 1rem; z-index: 10;
}

.tabs-header .logo { font-weight: 700; font-size: 1.1rem; color: var(--text-main); letter-spacing: -0.02em; }

.tabs {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  background: var(--bg-elevated); padding: 4px;
  border-radius: 100px; border: 1px solid var(--border-dim);
}

.tab-btn {
  padding: 0.5rem 1rem; background: transparent; border: none;
  color: var(--text-muted); border-radius: 100px; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; transition: var(--transition-smooth);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tab-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.05); }
.tab-btn.active { background: var(--border-dim); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.tab-btn[data-type="combine"].active { background: var(--accent); color: #000; box-shadow: 0 0 15px var(--accent-glow); }

.main-content-area { display: flex; flex: 1; overflow: hidden; background: var(--bg-base); }

/* Expanding Category Sidebar */
.category-sidebar {
  width: 68px; background: var(--bg-surface); border-right: 1px solid var(--border-dim);
  transition: width var(--transition-smooth); overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; padding: 1rem 0; z-index: 5;
}
/* Ensure the scrollbar doesn't clip on hover */
.category-sidebar:hover { width: 260px; box-shadow: 10px 0 30px rgba(0,0,0,0.5); }
/* Thinner scrollbar for the sidebar */
.category-sidebar::-webkit-scrollbar { width: 4px; }

.cat-list { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.5rem; }

.cat-btn {
  display: flex; align-items: center; background: transparent; border: 1px solid transparent;
  color: var(--text-muted); border-radius: var(--r-md); padding: 0.7rem;
  cursor: pointer; transition: all var(--transition-fast);
  white-space: nowrap; width: 100%; text-align: left;
}
.cat-btn .icon {
  min-width: 34px; display: inline-flex; justify-content: center;
  font-size: 1.2rem; transition: transform var(--transition-fast);
}
.cat-btn .label {
  opacity: 0; transform: translateX(-10px); transition: all var(--transition-smooth);
  font-size: 0.85rem; font-weight: 500; margin-left: 0.5rem;
}
.category-sidebar:hover .cat-btn .label { opacity: 1; transform: translateX(0); }

.cat-btn:hover { background: var(--bg-elevated); color: var(--text-main); }
.cat-btn.active {
  background: rgba(46,204,138,0.1); color: var(--accent);
  border-color: rgba(46,204,138,0.3);
}

/* Prompts List & Cards */
.prompts-list {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  scroll-behavior: smooth;
}

.prompt-card {
  background: var(--bg-surface); border: 1px solid var(--border-dim);
  border-radius: var(--r-lg); padding: 1.25rem;
  transition: var(--transition-smooth);
  display: flex; flex-direction: column; gap: 0.8rem;
}
.prompt-card:hover {
  border-color: var(--border-focus); transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Active / currently-loaded snippet indicator */
.prompt-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(46, 204, 138, 0.2);
  background: rgba(46, 204, 138, 0.04);
}
.prompt-card.is-active:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 32px rgba(46, 204, 138, 0.3);
}

.prompt-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.prompt-card h3 { font-size: 1rem; font-weight: 600; color: var(--text-main); line-height: 1.4; }

.delete-btn {
  background: var(--error-bg); color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 4px 10px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.7rem; font-weight: 600; transition: var(--transition-fast);
  white-space: nowrap;
}
.delete-btn:hover { background: var(--error); color: #fff; box-shadow: 0 0 10px rgba(239,68,68,0.4); }

.prompt-text {
  background: var(--bg-elevated); padding: 1rem; border-radius: var(--r-md);
  font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.6;
  color: #c9d1d9; white-space: pre-wrap; word-break: break-word;
  border-left: 3px solid var(--accent);
}

.card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.card-actions button {
  background: var(--bg-elevated); color: var(--text-main); border: 1px solid var(--border-dim);
  padding: 0.6rem 1rem; border-radius: var(--r-sm); font-size: 0.75rem; font-weight: 500;
  cursor: pointer; transition: var(--transition-fast); flex: 1; text-align: center;
}
.card-actions button:hover { background: var(--border-dim); color: #fff; border-color: #3d475f; }
.card-actions button.run-code-btn {
  background: rgba(46, 204, 138, 0.1); color: var(--accent);
  border-color: var(--accent); font-weight: 600;
}
.card-actions button.run-code-btn:hover {
  background: var(--accent); color: #000;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.copied-state {
  background: var(--accent) !important; color: #000 !important;
  border-color: var(--accent) !important; transform: scale(0.96); box-shadow: none !important;
}

/* =========================================
   4. EDITOR SECTION & SYNTAX
========================================= */
.editor-section {
  flex: 1; border-top: 1px solid var(--border-dim); display: flex;
  flex-direction: column; background: var(--code-bg); min-height: 280px; position: relative;
}

.editor-header {
  padding: 0.6rem 1.5rem; border-bottom: 1px solid #000; display: flex;
  justify-content: space-between; align-items: center;
  background: var(--bg-surface); flex-wrap: wrap; gap: 10px; z-index: 10;
}

.editor-tabs { display: flex; gap: 1.5rem; }
.ed-tab {
  background: none; border: none; color: var(--text-muted);
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; padding: 0.4rem 0; position: relative; transition: var(--transition-fast);
}
.ed-tab::after {
  content: ''; position: absolute; bottom: -0.7rem; left: 0; width: 100%;
  height: 2px; background: var(--accent); transform: scaleX(0);
  transition: var(--transition-smooth);
}
.ed-tab.active { color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
.ed-tab.active::after { transform: scaleX(1); box-shadow: 0 0 8px var(--accent); }

.editor-actions { display: flex; gap: 8px; }
.editor-actions button {
  border: none; padding: 0.5rem 1rem; border-radius: 100px; cursor: pointer;
  font-weight: 600; font-size: 0.75rem; transition: var(--transition-fast);
  display: flex; align-items: center; gap: 6px;
}
.sec-btn { background: var(--bg-elevated); color: var(--text-main); border: 1px solid var(--border-dim); }
.sec-btn:hover { background: #2a3143; border-color: #3d475f; }
.pri-btn { background: var(--accent); color: #000; box-shadow: 0 4px 12px var(--accent-glow); }
.pri-btn:hover { background: #5fffb8; transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-glow); }

.editor-body {
  flex: 1; position: relative; background: var(--code-bg);
  display: flex; flex-direction: column; overflow: hidden;
}

.error-bar {
  background: var(--error-bg); color: #fca5a5; padding: 0.4rem 1rem;
  font-size: 0.8rem; font-family: 'JetBrains Mono', monospace;
  display: none; border-bottom: 1px solid #991b1b; z-index: 20;
}

/* Code Editor Container Layout */
.editor-container { flex: 1; display: none; flex-direction: row; position: relative; overflow: hidden; }
.editor-container.active-editor { display: flex; }

.line-numbers {
  width: 45px; min-width: 45px; background: #1e1e1e; color: #6e7681;
  border-right: 1px solid #333; text-align: right;
  padding: 1.5rem 10px 1.5rem 0;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5;
  user-select: none; overflow: hidden; z-index: 5;
}

.code-scroll-area {
  flex: 1; position: relative; overflow: auto;
  background: var(--code-bg); display: flex;
}

/* syntax-highlight pre and textarea must align perfectly */
.syntax-highlight,
.code-editor {
  position: absolute; top: 0; left: 0; width: 100%; min-height: 100%;
  margin: 0; padding: 1.5rem; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem; line-height: 1.5; white-space: pre; tab-size: 2;
  overflow: visible; box-sizing: border-box;
  word-spacing: normal; letter-spacing: normal;
}

.syntax-highlight { color: #d4d4d4; pointer-events: none; z-index: 1; padding-bottom: 3rem; }
.code-editor {
  color: transparent !important; background: transparent;
  caret-color: #c6c6c6; z-index: 2; outline: none; resize: none;
}
.code-editor::selection { background: rgba(86, 156, 214, 0.3); color: transparent; }

/* =========================================
   5. PREVIEW & CONSOLE
========================================= */
.preview-header {
  padding: 0.8rem 1.5rem; border-bottom: 1px solid var(--border-dim);
  background: var(--bg-elevated); font-size: 0.85rem; font-weight: 600;
  color: var(--text-main); display: flex; justify-content: space-between; align-items: center;
}
.preview-badge {
  font-size: 0.7rem; background: rgba(46,204,138,0.15);
  padding: 0.2rem 0.6rem; border-radius: 100px; color: var(--accent);
  border: 1px solid rgba(46,204,138,0.3);
}

.iframe-container {
  flex: 1; position: relative; background: #05060a;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
#previewFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #fff; }

.console-container {
  height: 25%; min-height: 120px; background: #0b0e14;
  border-top: 1px solid var(--border-dim); display: flex; flex-direction: column;
}
.console-header {
  padding: 0.4rem 1rem; background: #11151f; border-bottom: 1px solid var(--border-dim);
  font-size: 0.75rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace;
  display: flex; justify-content: space-between; align-items: center;
}
.console-header button {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-family: inherit; transition: var(--transition-fast);
  padding: 4px 8px; border-radius: var(--r-sm);
}
.console-header button:hover { color: var(--error); background: rgba(239, 68, 68, 0.1); }

.console-output {
  flex: 1; padding: 0.8rem 1rem; overflow-y: auto;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; line-height: 1.5;
}
.console-log-line {
  margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.02);
  padding-bottom: 4px; word-break: break-all;
}
.console-log-line span { color: var(--text-muted); user-select: none; margin-right: 8px; }

/* Log Levels */
.log-log   { color: #a78bfa; } /* Purple / Standard */
.log-warn  { color: #fbbf24; } /* Yellow */
.log-error { color: #f87171; font-weight: 600; } /* Red */

/* =========================================
   6. RESPONSIVE QUERIES
========================================= */
@media (max-width: 900px) {
  .app-container { flex-direction: column; }
  .left-panel    { width: 100% !important; min-width: auto; height: 50vh; border-right: none; }
  .resizer       { height: 6px; width: 100%; cursor: row-resize; }
  .right-panel   { width: 100%; height: 50vh; }
  .editor-section { flex: 1.5; }
  .category-sidebar { display: none; }
}