/* Global Styles */
* {
  box-sizing: border-box; /* Apply border-box to all elements */
}

body {
  font-family: 'Ruluko', sans-serif;
  margin: 0;
  padding: 15px; /* Add some padding around the app */
  background-color: #87b5b5;
  color: #333;
  display: flex; /* Use flex to manage app container sizing */
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure body takes full viewport height */
  overflow: hidden; /* Prevent body scrollbars if app is full height */
}

.app-container {
  display: flex;
  flex-direction: row; /* Arrange editor and preview side-by-side */
  width: 98vw;       /* Take up most of the viewport width */
  height: 95vh;      /* Take up most of the viewport height */
  max-width: 1800px; /* Optional: limit max width on very large screens */
  gap: 20px;         /* Space between editor and preview columns */
}

/* Common styles for editor and preview panels */
.panel {
  flex: 1; /* Each panel takes equal width */
  display: flex;
  flex-direction: column; /* Stack toolbar and content vertically */
  height: 100%; /* Panels take full height of app-container */
  background-color: #c0d8d8;
  border: 1px solid black;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* Important: prevent panel itself from scrolling */
}

.toolbar {
  background-color: #4aa3a3;
  color: black;
  font-family: 'Lobster', cursive;
  font-size: 1.2em;
  padding: 8px 15px;
  border-bottom: 1px solid black; /* Separator from content area */
  box-shadow: 0px 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for toolbar */
  font-weight: bold;
  flex-shrink: 0; /* Prevent toolbar from shrinking */
}

#editor,
#preview {
  flex-grow: 1; /* Allow content area to take remaining vertical space */
  padding: 15px;
  overflow-y: auto; /* Enable vertical scrollbar when content overflows */
  line-height: 1.6;
  /* min-height: 0; /* Important for flex children to shrink properly if needed, often helps */
}

#editor {
  width: 100%; /* Full width of its parent's content area */
  border: none; /* Border is on the wrapper (.panel) */
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  background-color: #c0d8d8;
  color: black;
  resize: none; /* Disable textarea resizing, scrolling is handled */
  outline: none;
}

#preview {
  width: 100%; /* Full width of its parent's content area */
  background-color: #c0d8d8;
  color: black;
  word-wrap: break-word; /* Ensure long words break and don't overflow horizontally */
}

/* Styling for elements generated by Marked.js in #preview */
#preview h1, #preview h2, #preview h3, #preview h4, #preview h5, #preview h6 {
  margin-top: 15px;
  margin-bottom: 10px;
  color: #222;
  border-bottom: 1px solid #a0a0a0;
  padding-bottom: 5px;
}

#preview h1 { font-size: 1.8em; }
#preview h2 { font-size: 1.5em; }

#preview p {
  margin-bottom: 12px;
}

#preview a {
  color: #007bff;
  text-decoration: underline;
}

#preview a:hover {
  color: #0056b3;
}

#preview code { /* Inline code */
  background-color: white;
  padding: 0.2em 0.4em; /* Adjusted padding */
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
  border: 1px solid #ddd;
  font-family: 'Courier New', Courier, monospace;
  color: #333;
}

#preview pre { /* Code block */
  background-color: #333;
  color: white;
  padding: 15px;
  border: 1px solid black;
  border-radius: 4px;
  overflow-x: auto; /* Horizontal scroll for long code lines */
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  white-space: pre-wrap;
  word-wrap: break-word;
}

#preview pre code {
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: inherit; /* Inherit font size from pre */
  color: inherit;
  white-space: inherit; /* Ensure pre's white-space setting is used */
}

#preview blockquote {
  border-left: 4px solid #4aa3a3;
  padding: 10px 15px;
  margin: 15px 0;
  color: #333;
  background-color: #eef3f3;
  font-style: italic;
}

#preview ul, #preview ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 30px;
}

#preview li {
  margin-bottom: 8px;
}

#preview table {
  width: auto; /* Let table size itself, or set to 100% if needed */
  border-collapse: collapse;
  margin-bottom: 15px;
  border: 1px solid #666;
}

#preview th, #preview td {
  border: 1px solid #666;
  padding: 8px 12px;
  text-align: left;
}

#preview th {
  background-color: #a0c5c5;
  font-weight: bold;
}

#preview img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc;
}

/* No media query for stacking needed if side-by-side is the default and only layout */