/* DOMIoT Compose Website Styles - copied from ailab11-agen aesthetics */
/* For brevity, you can further tailor sections. */

:root {
    --domiot-green: #00ff00;
    --domiot-green-bright: #00ff13;
    --mystic-purple: #6d28d9;
    --deep-purple: #4c1d95;
    --plasma-pink: #ec4899;
    --ethereal-pink: #f472b6;
    --cosmic-violet: #8b5cf6;
    --aurora-magenta: #d946ef;
    --deep-void: #0a0a0f;
    --void-gray: #1a1a2e;
    --shadow-gray: #16213e;
    --mist-gray: #2d3748;
    --text-primary: #ffffff;
    --text-secondary: #e2e8f0;
}

html, body { height: 100%; overflow: hidden; }
body { font-family: 'Inter', sans-serif; background: var(--deep-void); color: var(--text-primary); margin: 0; }
/* Layout edge-to-edge */
.container { max-width: 100%; margin: 0; padding: 0; }
.nav { position: fixed; top:0; left:0; right:0; z-index: 1000; padding: 0.5rem 0; backdrop-filter: blur(20px); background: rgba(10,10,15,0.8); border-bottom: 1px solid rgba(0,255,0,0.1); }
.nav-container { max-width:100%; margin:0 auto; padding:0 1rem; display:flex; justify-content:space-between; align-items:center; }
.nav-menu { display:flex; list-style:none; gap:1rem; align-items:center; }
.nav-menu a { color: var(--text-secondary); text-decoration:none; }
.section { padding: 0; }
.section-title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.btn { padding: 0.5rem 0.8rem; border-radius: 8px; border: none; cursor: pointer; }
.btn-primary { background: linear-gradient(45deg, var(--domiot-green), var(--domiot-green-bright)); color: var(--deep-void); }
.btn-secondary { background: rgba(139, 92, 246, 0.1); color: var(--ethereal-pink); border: 1px solid var(--ethereal-pink); }
.floating-code { background: rgba(16,21,62,0.85); border: none; border-radius: 0; padding: 0.5rem; }
.hero-title { font-weight: 700; }
.gradient-text { background: linear-gradient(135deg, var(--domiot-green), var(--plasma-pink), var(--cosmic-violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.system-message { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(16,21,62,0.95); border: 2px solid var(--domiot-green); border-radius: 12px; padding: 0.75rem 1rem; z-index:10000; display:none; }
.system-message.show { display:block; }

/* Workspace full-height and tighter gaps */
#workspace-grid { height: 100vh; display: grid; grid-template-columns: 70% 30%; gap: 0.25rem; }
#workspace-grid > div { display: flex; flex-direction: column; min-height: 0; }
#editorPane { flex: 1; min-height: 0; }

/* Console overlay tweak to match new edges */
.console-overlay { border-radius: 0; }

/* Console overlay */
.console-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); color: var(--text-primary); font-weight: 600; z-index: 10; border-radius: 0; }
.console-overlay.show { display: flex; }

/* Console container positioning to allow overlay */
#console { position: relative; }

/* Code viewer (non-editable) */
.code-viewer { margin: 0; width: 100%; height: 100%; overflow: auto; white-space: pre; font-family: 'Fira Code', monospace; font-size: 0.9rem; color: var(--text-secondary); } 

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal-content { max-width: 720px; width: calc(100% - 2rem); }

/* Right pane full height helpers */
#console .floating-code { height: auto; } 

/* Focus styles matching prompt input for html editor */
#editorPane textarea:focus { outline: none; border-color: #ffffff; box-shadow: 0 0 0 1px #ffffff20; }

/* HTML editor border behavior */
#editorPane textarea { border-color: transparent !important; padding: 3px; }
#editorPane textarea:focus { outline: none; border-color: #ffffff !important; box-shadow: 0 0 0 1px #ffffff20; }

/* Tighter title input sizing to avoid overlap */
#titleInput { max-width: 240px; width: 90%; }

/* Prevent prompt from overflowing container */
#promptInput { width: 98%; box-sizing: border-box; }