/* Shared sizing: keep IDE and Files pane visually aligned */
:root{
  --pane-rows : 30;
  --pane-line : 1.3em;
  --paneHeight: calc(var(--pane-rows) * var(--pane-line));
}

html,body{height:100%;margin:0;padding:0}
body{font-family:sans-serif;margin:20px;display:flex;flex-direction:column}
button{width:140px;margin-right:10px}
textarea{width:100%;box-sizing:border-box}
#prompt{min-height:150px}
#systemPrompt{min-height:110px}
#resultContainer{flex:1;overflow-y:auto}
#resultContainer pre{white-space:pre-wrap;margin:0}
/* Treeview container replaces previous 2-column list */
#fileList{
  font-size:.78em;
  line-height:1.0em;
  height:var(--paneHeight);
  overflow:auto;
  padding:0px 0px;
}
/* Treeview styling */
.tree-file{ display:flex; align-items:center; gap:4px; margin:1px 0; white-space:nowrap; }
.tree-folder{ margin:0px 0; }
.tree-folder > summary{
  display:flex; align-items:center; gap:2px;
  cursor:pointer; list-style:none; padding:1px 0;
}
.tree-folder > summary::-webkit-details-marker{ margin-right:6px; }
.tree-children{ margin-left:14px; border-left:1px dashed #e5e7eb; padding-left:6px; }
#loading{display:none;background:rgb(0, 144, 201);color:#fff;padding:10px;margin-top:10px}
#buttonContainer{display:flex;gap:2px}
/* Reduce spacing in the model/actions button row: remove extra right-margin and rely on small flex gap */
#buttonContainer button{ margin-right: 0; }

/* Small icons in front of folders/files */
.icon{
  width: 1.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  opacity: .9;
  flex: 0 0 auto;
}
/* Folder: closed/open (CSS only via details[open]) */
.tree-folder > summary .folder-icon::before{ content: "📁"; }
.tree-folder[open] > summary .folder-icon::before{ content: "📂"; }


/* Layout */
#mainContainer{display:flex;flex-direction:column;height:100%}
#upperContent{display:flex;gap:10px;flex:0 0 auto}
#leftCol{flex:0 0 50%;max-width:50%;display:flex;flex-direction:column;overflow:hidden}
#prompt{flex:1 1 auto}
#rightCol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;white-space:nowrap}

button.model-btn { transition: background-color 0.2s ease, color 0.2s ease; }
/* “active” gives it the highlight */
button.model-btn.active { background-color: #007bff; color: #fff; }

/* “disabled” gives a dim look */
button.model-btn:disabled { opacity: 0.6; cursor: not-allowed; }


/* Usage overlay (bottom-right) */
#usageOverlay{
  position: fixed; right: 12px; bottom: 12px; z-index: 9999;
  background: rgba(0,0,0,0.75); color: #fff; padding: 8px 10px;
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  font-size: 12px; line-height: 1.35; max-width: 44ch; display: none;
  backdrop-filter: blur(4px);
}
#usageOverlay .title{ font-weight: 600; margin-bottom: 6px; }
#usageOverlay .row{ display:flex; justify-content:space-between; gap:8px; }
#usageOverlay .muted{ opacity:.75; }    

/* Simple tabs for right column */
.tabs{display:flex;flex-direction:column;height:100%}
.tab-header{display:flex;gap:6px;border-bottom:1px solid #e0e0e0}
.tab-btn{padding:6px 10px;background:#f5f5f5;border:1px solid #ccc;border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer}
.tab-btn.active{background:#fff}
.tab-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tab-panel{display:none;flex:1 1 auto;min-height:0;overflow:auto}
.tab-panel.active{display:block}

/* IDE scaling wrapper: keep embed same height as file list, render at 50% scale */
/* #ideHost{ /* container keeps layout natural; wrapper below clamps visible area */ /* } */
.scaled-embed{
  height: var(--paneHeight);
  overflow: hidden;         /* crop the doubled-size embed after scaling */
}
.scaled-embed atk-ide-embed{
  display: block;
  /* Pre-scale size is doubled; with scale(0.5) the visible size matches fileList */
  width : calc(100% * 2);
  height: calc(var(--paneHeight) * 2);
  transform: scale(0.5);
  transform-origin: top left;
}    

/* Apply controls injected near code blocks */
.apply-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:6px 0 10px; padding:6px 8px; background:#f8f9fb; border:1px solid #e6e8ec; border-radius:6px;
}
.apply-controls .label{ font-size:12px; opacity:.8; margin-right:6px; }
.apply-controls button{ padding:4px 10px; }
.apply-controls .status{ font-size:12px; }   

/* Ensure highlight.js dark theme renders with a dark background in results */
/* Also style non-highlighted code blocks the same way for a pleasant fallback */
#resultContainer pre{ white-space:pre-wrap; margin:0 0 12px; }
#resultContainer pre code,
#resultContainer pre code.hljs{
  display:block;
  padding:10px 12px;
  border-radius:6px;
  background:#0d1117;
  color:#c9d1d9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x:auto;
  tab-size: 2;
  border: 1px solid rgba(255,255,255,0.06);
}
/* Inline code */
#resultContainer :not(pre) > code{
  background:#f3f4f6;
  color:#111827;
  border:1px solid #e5e7eb;
  border-radius:4px;
  padding:0 .25em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size:.9em;
}
/* Make diff additions/deletions subtly stand out (works with hljs "diff") */
#resultContainer pre code .hljs-addition{ background-color: rgba(16,185,129,0.8); }
#resultContainer pre code .hljs-deletion{ background-color: rgba(239, 68, 68, 0.8); }    

/* Subtle visual feedback when a response arrives or fails */
@keyframes resultFlash {
  0%   { background-color: #fff3b0; }
  60%  { background-color: #ffec70; }
  100% { background-color: transparent; }
}
#resultContainer.flash {
  animation: resultFlash 650ms ease-in-out;
}