/* ===== EDITOR.CSS v5 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --pri:#6c5ce7;--pri2:#a29bfe;--acc:#00cec9;--acc2:#fd79a8;
  --bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;
  --text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);
  --grad:linear-gradient(135deg,#6c5ce7,#0984e3,#00cec9);
  --toolbar-h:42px;--tabbar-h:28px;--status-h:24px;
  --sidebar-w:260px;--radius:8px;
  --font-ui:'Poppins',sans-serif;--font-code:'Fira Code',monospace;
}
html,body{height:100%;overflow:hidden;font-family:var(--font-ui);background:var(--bg);color:var(--text);font-size:13px;}
.hidden{display:none!important;}
button{cursor:pointer;font-family:inherit;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(108,92,231,.3);border-radius:10px;}

/* Themes — UI always uses default dark gradient colors EXCEPT solarized-light (canvas only) */
body.theme-gradient{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#1a1a3e;}
body.theme-dark{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#1e1e1e;}
body.theme-light{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#ffffff;}
body.theme-solarized-light{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#fdf6e3;}
body.theme-solarized-dark{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#002b36;}
body.theme-monokai{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#272822;}
body.theme-dracula{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#282a36;}
body.theme-nord{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#2e3440;}
body.theme-one-dark{--bg:#0a0a1a;--surface:#12122e;--surface2:#1a1a3e;--surface3:#22224a;--text:#e0e0ff;--text2:#8888aa;--border:rgba(108,92,231,.2);--status-bg:#0d0d1a;--canvas-bg:#282c34;}

.app-container{display:flex;height:100vh;width:100vw;overflow:hidden;position:relative;}
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* ===== SIDEBAR (overlay) ===== */
.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:300;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;animation:slideIn .2s ease;overflow:hidden;box-shadow:4px 0 20px rgba(0,0,0,.4);}
@keyframes slideIn{from{transform:translateX(-100%);opacity:0;}to{transform:translateX(0);opacity:1;}}
.sidebar-backdrop{position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.3);}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text2);}
.sidebar-actions{display:flex;gap:4px;}
.sidebar-actions button{background:none;border:none;color:var(--text2);width:26px;height:26px;border-radius:4px;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.sidebar-actions button:hover{background:var(--surface3);color:var(--pri2);}
.sidebar-tree{flex:1;overflow-y:auto;padding:8px;}
.tree-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:12px;transition:background .15s;user-select:none;}
.tree-item:hover{background:var(--surface2);}
.tree-item.active{background:var(--surface3);color:var(--pri2);}
.tree-item i{font-size:11px;width:14px;text-align:center;}
.tree-item .folder-icon{color:#f39c12;}
.tree-item .file-icon-html{color:#e44d26;}
.tree-item .file-icon-css{color:#264de4;}
.tree-item .file-icon-js{color:#f7df1e;}
.tree-item .file-icon-ts{color:#3178c6;}
.tree-item .file-icon-json{color:#f39c12;}
.tree-item .file-icon-md{color:#fff;}
.tree-item .file-icon-img{color:#00cec9;}
.tree-folder{margin-left:12px;}
.tree-item .delete-file{margin-left:auto;opacity:0;color:var(--acc2);transition:opacity .15s;}
.tree-item:hover .delete-file{opacity:1;}
.sidebar-gallery{border-top:1px solid var(--border);padding:0;max-height:34px;overflow:hidden;transition:max-height .3s ease;}
.sidebar-gallery.gallery-open{max-height:40vh;overflow-y:auto;}
.sidebar-gallery .gallery-header{padding:8px;cursor:pointer;user-select:none;margin-bottom:0;}
.sidebar-gallery .gallery-header:hover{background:var(--surface2);}
.sidebar-gallery .gallery-header .gal-chevron{transition:transform .3s;margin-left:auto;font-size:10px;color:var(--text2);}
.sidebar-gallery.gallery-open .gallery-header .gal-chevron{transform:rotate(180deg);}
.sidebar-gallery .gallery-grid{padding:0 8px 8px;}
.gallery-header{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.gallery-header button{background:none;border:none;color:var(--text2);font-size:12px;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.gallery-thumb{aspect-ratio:1;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border .2s;position:relative;}
.gallery-thumb:hover{border-color:var(--pri);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}

/* ===== TOOLBAR ===== */
.toolbar{height:var(--toolbar-h);min-height:var(--toolbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:var(--surface);border-bottom:1px solid var(--border);gap:4px;}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:2px;}
.toolbar-left{min-width:0;}

.tb-btn{background:transparent;border:none;color:var(--text2);width:34px;height:34px;border-radius:6px;font-size:15px;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .15s;flex-shrink:0;position:relative;}
.tb-btn:hover{color:var(--pri2);background:rgba(108,92,231,.08);}
.tb-btn:active{transform:scale(.9);}
.tb-btn.active{color:var(--pri);}
.tb-btn-warn:hover{color:#f39c12;}
.tb-btn-accent{background:var(--grad)!important;color:#fff!important;box-shadow:0 2px 10px rgba(108,92,231,.3);width:auto;padding:0 10px;}
.tb-btn-accent:hover{box-shadow:0 4px 16px rgba(108,92,231,.5)!important;}

/* Tools slide — slides right-to-left */
.tools-slide{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:0;transition:max-width .3s ease,opacity .3s;opacity:0;}
.tools-slide::-webkit-scrollbar{display:none;}
.tools-slide.open{max-width:600px;opacity:1;}
.tools-toggle-btn{font-size:16px;color:var(--pri2);}
.tools-toggle-btn.active{color:var(--acc);}

.app-title{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;letter-spacing:1px;margin-left:4px;white-space:nowrap;}
.app-title i{color:var(--pri);font-size:16px;}
.app-title em{font-style:normal;color:var(--acc);}

/* ===== TAB BAR + PREVIEW TOGGLE ROW ===== */
.tab-preview-row{display:flex;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--border);height:var(--tabbar-h);}
.tab-bar{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0;position:relative;}
.tabs-scroll{flex:1;display:flex;overflow-x:auto;scrollbar-width:none;height:100%;align-items:stretch;scroll-behavior:smooth;}
.tabs-scroll::-webkit-scrollbar{display:none;}
.tab{display:flex;align-items:center;gap:5px;padding:0 12px;height:100%;background:transparent;border:none;color:var(--text2);font-size:11px;cursor:pointer;white-space:nowrap;border-right:1px solid var(--border);transition:background .15s,color .15s;position:relative;min-width:110px;flex-shrink:0;font-family:var(--font-ui);}
.tab:hover{background:var(--surface);color:var(--text);}
.tab.active{background:var(--surface2);color:var(--text);border-bottom:2px solid var(--pri);}
.tab .tab-icon{font-size:11px;flex-shrink:0;}
.tab .tab-close{font-size:9px;width:14px;height:14px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;opacity:.4;flex-shrink:0;}
.tab .tab-close:hover{opacity:1;background:var(--acc2);color:#fff;}
.tab.has-changes .tab-close{font-size:0;background:var(--pri);opacity:1;width:8px;height:8px;margin:0 3px;}
.tab.has-changes .tab-close:hover{background:var(--acc2);width:14px;height:14px;font-size:9px;margin:0;}
.tab.dragging{opacity:.5;}
.tab.drag-over{border-left:2px solid var(--pri);}
#btn-new-tab{background:none;border:none;color:var(--text2);width:28px;height:100%;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#btn-new-tab:hover{background:var(--surface2);color:var(--pri2);}
.tab-bar-preview-toggle{display:flex;align-items:center;padding:0 4px;border-left:1px solid var(--border);flex-shrink:0;background:var(--surface);}
.tab-bar-preview-toggle button{background:none;border:none;color:var(--text2);font-size:12px;width:28px;height:100%;display:flex;align-items:center;justify-content:center;transition:color .15s;}
.tab-bar-preview-toggle button:hover{color:var(--acc);}
/* Tab scroll buttons */
.tab-scroll-btn{position:absolute;top:0;height:100%;width:20px;display:none;align-items:center;justify-content:center;background:var(--surface2);border:none;color:var(--text2);font-size:10px;z-index:5;cursor:pointer;}
.tab-scroll-btn:hover{color:var(--pri2);background:var(--surface3);}
.tab-scroll-left{left:0;box-shadow:4px 0 8px rgba(0,0,0,.3);}
.tab-scroll-right{right:0;box-shadow:-4px 0 8px rgba(0,0,0,.3);}

/* ===== EDITOR + PREVIEW (70/30) ===== */
.editor-preview{flex:1;display:flex;overflow:hidden;position:relative;}
.editor-pane{flex:1;min-width:0;overflow:hidden;background:var(--surface2);}
#monaco-container{width:100%;height:100%;}

/* Fix Monaco Editor suggest widget rendering in Electron */
.monaco-editor .suggest-widget {
  font-family: 'Fira Code', Consolas, 'Courier New', monospace !important;
  font-size: 13px !important;
  border: 1px solid rgba(108,92,231,.3) !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row {
  font-family: 'Fira Code', Consolas, 'Courier New', monospace !important;
  color: #e0e0ff !important;
  font-size: 13px !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label .monaco-icon-label-container {
  color: #e0e0ff !important;
  font-size: 13px !important;
  display: inline !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label .monaco-icon-label-container .monaco-highlighted-label {
  color: #e0e0ff !important;
  font-size: 13px !important;
  display: inline !important;
}

/* CRITICAL: Force label name to be visible */
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .label-name,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-icon-label-name {
  color: #e0e0ff !important;
  font-size: 13px !important;
  font-family: 'Fira Code', Consolas, 'Courier New', monospace !important;
  display: inline !important;
  visibility: visible !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .label-details {
  color: #8888aa !important;
  font-size: 12px !important;
  display: inline !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row .contents {
  font-family: 'Fira Code', Consolas, 'Courier New', monospace !important;
  font-size: 13px !important;
  color: #e0e0ff !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.monaco-editor .suggest-widget .monaco-list .monaco-list-row.focused {
  background: rgba(108,92,231,.2) !important;
}

/* Force all text in suggest widget to be visible */
.monaco-editor .suggest-widget *,
.monaco-editor .suggest-widget span,
.monaco-editor .suggest-widget .monaco-icon-label {
  visibility: visible !important;
  color: #e0e0ff !important;
}
.resize-handle{width:5px;cursor:col-resize;background:var(--bg);display:flex;align-items:center;justify-content:center;position:relative;z-index:10;transition:background .2s;flex-shrink:0;}
.resize-handle:hover,.resize-handle.active{background:var(--pri);}
.resize-dots{display:flex;flex-direction:column;gap:3px;}
.resize-dots span{width:2px;height:2px;border-radius:50%;background:var(--text2);}
.preview-pane{width:30%;min-width:0;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);flex-shrink:0;overflow:hidden;}
.preview-header{display:flex;align-items:center;padding:3px 8px;gap:6px;border-bottom:1px solid var(--border);font-size:10px;font-weight:600;color:var(--text2);letter-spacing:1px;flex-shrink:0;}
.preview-header>span{white-space:nowrap;}
.preview-controls{display:flex;gap:1px;margin-left:auto;}
.preview-controls button{background:none;border:none;color:var(--text2);width:22px;height:22px;border-radius:4px;font-size:10px;display:flex;align-items:center;justify-content:center;}
.preview-controls button:hover{background:var(--surface3);color:var(--pri2);}
.preview-size-control{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--text2);}
.preview-size-control input[type=range]{width:45px;height:3px;accent-color:var(--pri);}
.preview-frame-wrapper{flex:1;overflow:hidden;background:linear-gradient(135deg,#a29bfe,#74b9ff);}
.preview-frame-wrapper iframe{width:100%;height:100%;border:none;background:transparent;overflow:auto;}

/* Preview hidden — full hide, editor expands */
.preview-pane.pv-hidden{display:none!important;}
.preview-pane.pv-hidden + .resize-handle{display:none!important;}

/* ===== STATUS BAR ===== */
.status-bar{height:var(--status-h);min-height:var(--status-h);display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:var(--status-bg,#0d0d1a);font-size:11px;color:rgba(255,255,255,.7);}
.status-left,.status-right{display:flex;align-items:center;gap:8px;}
.status-item{display:flex;align-items:center;gap:3px;white-space:nowrap;}
.status-live{color:#2ecc71;}
.status-live i{font-size:6px;}

/* ===== FLOATING BUTTONS ===== */
.zen-exit-btn{position:fixed;bottom:40px;right:20px;z-index:9999;width:48px;height:48px;border-radius:50%;border:none;background:var(--grad);color:#fff;font-size:18px;box-shadow:0 4px 20px rgba(108,92,231,.5);display:flex;align-items:center;justify-content:center;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{box-shadow:0 4px 20px rgba(108,92,231,.5);}50%{box-shadow:0 4px 30px rgba(108,92,231,.8);}}
.zen-exit-btn:hover{transform:scale(1.1);}
.preview-revert-btn{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:100;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;display:flex;align-items:center;gap:6px;box-shadow:0 4px 15px rgba(0,0,0,.3);}
.preview-revert-btn:hover{background:var(--pri);color:#fff;border-color:var(--pri);}

/* ===== CONTEXT MENU ===== */
.context-menu{position:fixed;z-index:9000;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 0;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,.4);animation:ctxIn .15s ease;}
@keyframes ctxIn{from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);}}
.ctx-item{padding:7px 14px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s;}
.ctx-item:hover{background:var(--surface3);color:var(--pri2);}
.ctx-item i{width:14px;text-align:center;font-size:11px;color:var(--text2);}
.ctx-divider{height:1px;background:var(--border);margin:4px 0;}

/* ===== ZEN MODE ===== */
body.zen-mode .toolbar{display:none;}
body.zen-mode .tab-preview-row{display:none;}
body.zen-mode .status-bar{display:none;}
body.zen-mode .preview-pane{display:none!important;}
body.zen-mode .resize-handle{display:none!important;}
body.zen-mode .editor-pane{flex:1!important;}

/* Fullscreen preview */
#fullscreen-preview{position:fixed;inset:0;z-index:9500;background:var(--bg);display:flex;flex-direction:column;}
.fs-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--border);font-size:13px;color:var(--text2);}
.fs-toolbar button{background:none;border:none;color:var(--text2);font-size:16px;width:32px;height:32px;border-radius:6px;}
.fs-toolbar button:hover{background:var(--surface3);color:var(--pri2);}
#fullscreen-preview iframe{flex:1;width:100%;border:none;background:#fff;}

@media(max-width:768px){
  .tools-slide,.tools-toggle-btn{display:none;}
  .app-title span{display:none;}
}

/* ===== TOAST NOTIFICATIONS ===== */
.se-toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);padding:10px 22px;border-radius:8px;font-size:12px;font-weight:500;color:#fff;z-index:99999;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.4);font-family:var(--font-ui);}
.se-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
.se-toast-info{background:linear-gradient(135deg,#6c5ce7,#0984e3);}
.se-toast-success{background:linear-gradient(135deg,#2ecc71,#00cec9);}
.se-toast-error{background:linear-gradient(135deg,#e74c3c,#fd79a8);}

/* ===== SETTINGS — Flat Single-Page Layout ===== */
.settings-body{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding:20px 32px;overflow-y:auto;max-width:1100px;margin:0 auto;width:100%;align-content:start;}
.settings-section{background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:14px;padding:20px 24px;}
.settings-section h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.settings-section h3 i{color:var(--pri);font-size:14px;}

/* Monaco Suggest Widget Text Visibility Fixes */
.monaco-editor .suggest-widget .monaco-list-row .main .label-name {
  color: #e0e0ff !important;
}
.monaco-editor .suggest-widget .monaco-list-row .main .type-label {
  color: #8888aa !important;
}
.monaco-editor .suggest-widget .monaco-list-row .main .read-more {
  color: #a29bfe !important;
}
.monaco-editor .suggest-widget .monaco-list-row.focused .main .label-name {
  color: #ffffff !important;
}
.monaco-editor .suggest-widget .monaco-list-row .main {
  color: #e0e0ff !important;
}