/* ═══════════════════════════════════════════════════════════════
   DSWallah Universal Layout Fix
   Code area bada, buttons chhote, proper sizing
   Works for: Python, JS, SQL, React, CSS, etc.
   ═══════════════════════════════════════════════════════════════ */

/* Main Container - Full Height */
#plab,
.tool-container,
.playground-container,
.editor-container {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Toolbar - Compact */
.plab-toolbar,
.tool-toolbar,
.playground-toolbar {
  padding: 6px 12px !important;
  gap: 8px !important;
  min-height: 40px !important;
}

/* Brand - Compact */
.plab-brand,
.tool-brand {
  font-size: 13px !important;
}

.plab-brand .plab-logo,
.tool-brand .tool-logo {
  width: 24px !important;
  height: 24px !important;
  font-size: 10px !important;
}

/* Tools Buttons - Compact */
.plab-tools,
.tool-actions,
.playground-actions {
  gap: 6px !important;
}

.plab-tools button,
.plab-tools select,
.tool-actions button,
.playground-actions button {
  height: 26px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
}

.plab-tools button svg,
.tool-actions button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Body - Full Height */
.plab-body,
.tool-body,
.playground-body {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  overflow: hidden !important;
}

/* Editor - Takes Most Space */
.plab-editor,
.tool-editor,
.playground-editor {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Editor Header - Compact */
.plab-editor-head,
.tool-editor-head {
  padding: 6px 10px !important;
  min-height: 32px !important;
}

.plab-filename,
.tool-filename {
  font-size: 12px !important;
}

.plab-editor-actions,
.tool-editor-actions {
  gap: 6px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.plab-editor-actions button,
.tool-editor-actions button {
  height: 24px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  background: #27272a !important;
  color: #d4d4d8 !important;
  border: 1px solid #3f3f46 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.plab-editor-actions button:hover,
.tool-editor-actions button:hover {
  background: #f97316 !important;
  color: #fff !important;
  border-color: #f97316 !important;
}

/* Editor Body - BIG CODE AREA */
.plab-editor-body,
.tool-editor-body,
.playground-editor-body {
  flex: 1 !important;
  min-height: 300px !important;
  overflow: auto !important;
}

/* Code Cells - Proper Sizing */
.plab-cell,
.tool-cell {
  min-height: 150px !important;
}

.plab-cell textarea,
.tool-cell textarea,
.plab-cell .CodeMirror,
.tool-cell .CodeMirror {
  min-height: 150px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Run Bar - Compact */
.plab-runbar,
.tool-runbar,
.playground-runbar {
  padding: 6px 10px !important;
  min-height: 36px !important;
  gap: 6px !important;
}

.plab-runbar button,
.tool-runbar button,
.playground-runbar button {
  height: 28px !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border-radius: 5px !important;
}

.plab-runbar button#plab-run,
.tool-runbar button.run-btn {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: white !important;
  font-weight: 600 !important;
}

.plab-runbar button#plab-run:hover,
.tool-runbar button.run-btn:hover {
  background: #c2410c !important;
}

.plab-runbar kbd,
.tool-runbar kbd {
  font-size: 10px !important;
  padding: 2px 6px !important;
}

.plab-runbar select,
.tool-runbar select {
  height: 24px !important;
  font-size: 10px !important;
  padding: 0 6px !important;
}

/* Divider - Draggable */
.plab-divider,
.tool-divider {
  width: 6px !important;
  background: #27272a !important;
  cursor: col-resize !important;
  flex-shrink: 0 !important;
  position: relative !important;
}

.plab-divider:hover,
.tool-divider:hover {
  background: #f97316 !important;
}

.plab-divider::after,
.tool-divider::after {
  content: '⋮' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #52525b !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

.plab-divider:hover::after,
.tool-divider:hover::after {
  color: #fff !important;
}

/* Console/Output - Smaller & Flexible */
.plab-console,
.tool-console,
.tool-output,
.playground-output {
  width: 30% !important;
  min-width: 200px !important;
  max-width: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

.plab-console-head,
.tool-console-head {
  padding: 6px 10px !important;
  min-height: 32px !important;
}

.plab-console-tabs button,
.tool-console-tabs button {
  font-size: 11px !important;
  padding: 4px 8px !important;
}

.plab-console-head button,
.tool-console-head button {
  height: 22px !important;
  font-size: 10px !important;
  padding: 0 6px !important;
}

.plab-out,
.tool-out,
.tool-output-content {
  flex: 1 !important;
  min-height: 80px !important;
  max-height: 250px !important;
  overflow: auto !important;
  font-size: 13px !important;
  padding: 10px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Input Line */
.plab-inputline,
.tool-inputline {
  padding: 8px 10px !important;
  gap: 6px !important;
}

.plab-inputline input,
.tool-inputline input {
  height: 32px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}

.plab-inputline button,
.tool-inputline button {
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
}

/* Loading */
.plab-loading,
.tool-loading {
  padding: 20px !important;
}

.plab-spinner,
.tool-spinner {
  width: 32px !important;
  height: 32px !important;
}

/* File Explorer (if visible) */
.plab-files,
.tool-files {
  width: 180px !important;
}

.plab-files-head,
.tool-files-head {
  padding: 6px 10px !important;
  font-size: 10px !important;
}

.plab-file-item,
.tool-file-item {
  padding: 6px 10px !important;
  font-size: 11px !important;
}

/* AI Panel (if visible) */
.plab-ai-panel,
.tool-ai-panel {
  width: 320px !important;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .plab-body,
  .tool-body,
  .playground-body {
    flex-direction: column !important;
  }
  
  .plab-editor,
  .tool-editor,
  .playground-editor {
    width: 100% !important;
    min-height: 50% !important;
  }
  
  .plab-console,
  .tool-console,
  .tool-output,
  .playground-output {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30% !important;
  }
  
  .plab-divider,
  .tool-divider {
    width: 100% !important;
    height: 4px !important;
    cursor: row-resize !important;
  }
  
  .plab-tools,
  .tool-actions {
    flex-wrap: wrap !important;
  }

  /* Hide sticky Google button on mobile */
  #plab-google-sticky {
    display: none !important;
  }
}

/* Sticky Google Button - Desktop Only */
@media (min-width: 769px) {
  #plab-google-sticky {
    position: fixed !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 100 !important;
  }
}

/* Dark Theme Overrides */
.plab-editor-body,
.tool-editor-body,
.playground-editor-body,
.plab-cells,
.tool-cells,
.plab-cell textarea,
.tool-cell textarea,
.plab-cell .CodeMirror,
.tool-cell .CodeMirror {
  background: #09090b !important;
  color: #fafafa !important;
}

/* Scrollbar Styling */
.plab-editor-body::-webkit-scrollbar,
.tool-editor-body::-webkit-scrollbar,
.plab-out::-webkit-scrollbar,
.tool-out::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.plab-editor-body::-webkit-scrollbar-track,
.tool-editor-body::-webkit-scrollbar-track,
.plab-out::-webkit-scrollbar-track,
.tool-out::-webkit-scrollbar-track {
  background: #18181b !important;
}

.plab-editor-body::-webkit-scrollbar-thumb,
.tool-editor-body::-webkit-scrollbar-thumb,
.plab-out::-webkit-scrollbar-thumb,
.tool-out::-webkit-scrollbar-thumb {
  background: #3f3f46 !important;
  border-radius: 4px !important;
}

.plab-editor-body::-webkit-scrollbar-thumb:hover,
.tool-editor-body::-webkit-scrollbar-thumb:hover,
.plab-out::-webkit-scrollbar-thumb:hover,
.tool-out::-webkit-scrollbar-thumb:hover {
  background: #52525b !important;
}