html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

button { appearance: none; -webkit-appearance: none; }

/* --- Results Layout --- */

.results-container {
  padding: 1rem;
  /* Mobile default: Stack everything */
  display: block; 
}

/* Direct children stack with margin on mobile */
.results-container > * {
  margin-bottom: 1rem; 
}
.results-container > *:last-child {
  margin-bottom: 0; 
}

/* Desktop Layout (Example breakpoint: 1024px) */
@media (min-width: 1024px) {
  .results-container {
    display: grid;
    /* Define 4 columns: 3x 1fr for tweets, 1x fixed 320px for sidebar */
    grid-template-columns: 1fr 1fr 1fr 320px; 
    grid-template-rows: auto; /* Let rows size automatically */
    gap: 1rem;
    padding: 1rem; 
    /* Align columns to start to prevent stretching */
    align-items: start; 
    /* Add other relevant styles from inline */
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Reset margin for grid layout */
  .results-container > * { 
     margin-bottom: 0; 
  }

  /* Reset order for grid layout */
  .tweets-column {
    grid-column: 1 / span 3; /* Span first 3 columns */
    grid-row: 1; /* Ensure it starts on the first row */
  }
  .sidebar-column {
    grid-column: 4 / span 1; /* Span last column */
    grid-row: 1; /* Ensure it starts on the first row */
    /* Stack items vertically in sidebar */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between sidebar items */
  }

  /* Internal layout for tweets area on desktop */
  .tweets-content { /* Target the inner div */
      column-count: 3;
      column-gap: 1rem;
   }
}

/* Ensure chart/link containers still behave well internally */
.sidebar-column > .viz-item {
  display: flex; 
  flex-direction: column;
  min-width: 0; 
}

/* Style for the inner containers to allow charts/lists to size */
.sidebar-column > .viz-item > div:last-child {
  flex-grow: 1; /* Allows ResponsiveContainer/list to fill space */
  min-height: 250px; /* Ensure space for charts */
}
/* Target link list specifically for scrolling */
.sidebar-column > .viz-item:last-of-type > div:last-child { 
   overflow-y: auto; 
}

table { 
  width: 100%;
}

table th { 
  text-align: left;
  font-weight: 500;
  padding: 0 0 4px 0;
}

table tr td { 
  border-top: 1px solid rgba(0,0,0,.1);
  padding: 8px 0;
}