/* ============================================================
   assistente.framework.css
   ONLY LAYOUT, FLEX, RESPONSIVE, AND GLUE
   NO colors, NO borders, NO fonts, NO shadows
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
  background: #ffffff;
  color: #fff;
}

.page-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* SIDEBAR – never collapses */
aside.sidebar {
  width: 280px;
  min-width: 220px;
  max-width: 600px;
  flex-shrink: 0;               /* ← THIS IS THE ONE LINE THAT FIXED EVERYTHING */
  display: flex;
  flex-direction: column;
  resize: horizontal;           /* ← drag to resize like ChatGPT */
  overflow: auto;
}

/* MAIN CHAT AREA */
main.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* prevents flex overflow */
}

/* Structural sections */
.chat-header   { flex-shrink: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chat-input    { flex-shrink: 0; }
.chat-footer   { flex-shrink: 0; }

/* RESPONSIVE – mobile drawer */
@media (max-width: 868px) {
  aside.sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    width: 280px;
    transition: left 0.28s ease;
    z-index: 999;
  }
  aside.sidebar.open { left: 0; }

  /* backdrop */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s;
  }
  body.sidebar-open::before {
    opacity: 1;
    pointer-events: all;
  }
}

/* MODAL: close button always top-right inside the modal box */
#myAccountModal .account-panel-body,
#clientModal .account-panel-body {
  position: relative;
}

#myAccountModal .account-modal-close,
#clientModal .account-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 50;
}