/* Clean layout override to fix all issues */

/* Reset body scrolling behavior */
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Hero and selector should shrink to content */
.hero {
    flex: 0 0 auto;
}

.example-selector {
    flex: 0 0 auto;
}

/* Playground fills remaining space */
.playground {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
}

/* Content container */
.playground-content {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Equal width panels */
.editor-section {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid #e2e8f0;
}

.output-section {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
}

/* Toolbar */
.toolbar {
    flex: 0 0 auto;
}

/* Editor container */
.editor-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.editor-wrapper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Output tabs */
.output-tabs {
    flex: 0 0 auto;
}

/* Output container */
.output-container {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    background: #1a202c;
}

/* Output panels - only show active one */
.output-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    display: none;
    background: #1a202c;
}

/* Use both class and inline style for reliability */
.output-panel.active,
.output-panel[style*="display: block"] {
    display: block !important;
}

/* Output content */
#output, #generated-code {
    background: #1a202c;
    color: #e2e8f0;
    padding: 20px;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* CodeMirror fills container */
.CodeMirror {
    height: 100%;
}

/* Ensure clickable elements work */
button, select, input, a {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* Copy button positioning */
.generated-header {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}