/* responsive.css */

/* Responsive behavior - applies only on smaller screens */
@media (max-width: 1200px) {

    /* Left panel as an overlay */
    .left-panel {
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        padding: 1em;
    }

    .left-panel.hidden {
        width: 0;
        /* Set width to 0 when hidden */
        visibility: hidden;
        /* Fully hide the panel */
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    header {
        height: 125px;
    }

    header li {
        flex-direction: column;
        display: block;
        padding: 2px;
    }

    body {
        margin-top: 100px;
    }

    .conversation-container.expanded {

        width: 0;
        /* Set width to 0 when hidden */
        visibility: hidden;
        /* Fully hide the panel */
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .conversation-container.collapsed {
        margin: 0 auto;
        min-width: 100vw;
        max-width: 100vw;
        padding: 1em;
        margin-left: 0;

    }
}

/* Responsive design adjustments */
@media (max-width: 768px) {
  .title {
    font-size: 1.5rem;
  }

  .subtitle {
    font-size: 1.25rem;
  }

  .subsection-title {
    font-size: 1rem;
  }

  .paragraph {
    font-size: 0.9rem;
  }
}