/* ---------- App layout ---------- */

.calcpad-app {
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: hidden;
}

/* ---------- Header ---------- */

.calcpad-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  height: 40px;
}

.calcpad-header h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.header-spacer {
  flex: 1;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-divider {
  width: 1px;
  height: 16px;
  background: var(--border);
}

/* ---------- Sidebar toggle ---------- */

.header-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s;
}

.header-sidebar-toggle:hover {
  background: var(--accent-bg);
}

/* ---------- Workspace (sidebar + editor area) ---------- */

.calcpad-workspace {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ---------- Editor area (two-column layout) ---------- */

.calcpad-editor {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.editor-pane {
  flex: 3;
  min-width: 0;
  overflow: hidden;
}

.editor-pane .calc-editor {
  height: 100%;
}

/* Ensure CodeMirror fills its container */
.editor-pane .cm-editor {
  height: 100%;
}

.pane-divider {
  width: 5px;
  background: var(--border);
  flex-shrink: 0;
  cursor: col-resize;
  transition: background 0.15s;
  position: relative;
}

.pane-divider:hover {
  background: var(--accent);
}

/* Wider invisible hit area */
.pane-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
}

.results-panel {
  flex: 1;
  min-width: 120px;
}

/* ---------- Responsive: Mobile (< 768px) ---------- */

@media (max-width: 767px) {
  .calcpad-app {
    height: 100dvh;
  }

  .calcpad-header {
    height: 44px;
    padding: 6px 8px;
    gap: 8px;
  }

  .header-sidebar-toggle {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .header-divider {
    display: none;
  }

  .pane-divider {
    display: none;
  }

  /* Editor goes full width, results panel hidden (tray replaces it) */
  .calcpad-editor {
    flex-direction: column;
  }

  .editor-pane {
    flex: 1 !important;
    width: 100% !important;
  }

  .results-panel {
    display: none;
  }
}

/* Safe areas for notched devices */
@supports (padding: env(safe-area-inset-top)) {
  .calcpad-app {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Prevent pull-to-refresh in PWA */
.calcpad-app {
  overscroll-behavior: none;
}
