@media (max-width: 1024px){
  /* Global left sidebar becomes a drawer on mobile */
  .drawer-backdrop{
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .sidebar[data-drawer]{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: min(84vw, 340px);
    transform: translateX(-105%);
    transition: transform .18s ease;
    z-index: 10040;
  }
  .sidebar[data-drawer].open{
    transform: translateX(0);
  }
  .drawer-backdrop:not([hidden]){
    opacity: 1;
    pointer-events: auto;
    position: fixed;
    inset: 0;
    z-index: 10030;
  }

  /* When sidebar is closed, content should be full width */
  .app-shell{ grid-template-columns: 1fr !important; }
}

@media (max-width: 1024px){
  html, body{ background: #f7f8fb; }
}

/* ===========================================================
   Educa Mobile v5 - ChatGPT-like chat on mobile/tablet
   Desktop unchanged: ALL rules are behind max-width queries.
   Applies only to body.module-chat (student chat page).
   =========================================================== */

/* Tablet + phone */
@media (max-width: 1024px) {
  body.module-chat {
    background: #0b0b0c; /* browser overscroll edge feels like app */
  }

  /* Make chat container edge-to-edge */
  body.module-chat .container.chat-container{
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.module-chat .chat-shell{
    display:flex;
    height: calc(100dvh - 56px); /* top header approx; safe with scrolling */
    min-height: 100dvh;
    background:#f7f7f8;
    border-radius: 0 !important;
    overflow: hidden;
  }

  /* Main becomes full width */
  body.module-chat .chat-main{
    width: 100%;
    min-width: 0;
    display:flex;
    flex-direction: column;
    background:#f7f7f8;
  }

  /* Hide desktop-like sidebar by default (we'll open it as a drawer) */
  body.module-chat .chat-sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(92vw, 380px);
    background: #ffffff;
    z-index: 10060;
    transform: translateX(-110%);
    transition: transform .22s ease;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    border-right: 1px solid rgba(17,24,39,.08);
  }

  body.module-chat.chat-drawer-open .chat-sidebar{
    transform: translateX(0);
  }

  /* Backdrop */
  body.module-chat .chat-drawer-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 10050;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.module-chat.chat-drawer-open .chat-drawer-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Make the top bar feel like ChatGPT mobile */
  body.module-chat .chat-main-top{
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(247,247,248,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(17,24,39,.08);
    padding: 10px 12px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
  }

  body.module-chat .chat-main-title{
    font-size: 16px !important;
    line-height: 1.1;
    margin: 0 !important;
    font-weight: 700;
  }
  body.module-chat .chat-main-sub{
    display:none !important;
  }

  body.module-chat .chat-mobile-left{
    display:flex;
    align-items:center;
    gap: 10px;
    min-width: 0;
  }

  body.module-chat .chat-mobile-btn{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(17,24,39,.10);
    background: #fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size: 18px;
  }

  /* Messages area */
  body.module-chat .chat-log{
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px 120px; /* space for composer */
  }

  /* Message bubbles (map existing msg classes) */
  body.module-chat .msg-wrap{
    position: relative;
    display:flex;
    margin: 10px 0;
  }
  body.module-chat .msg-wrap.me{
    justify-content: flex-end;
  }
  body.module-chat .msg-wrap.ai{
    justify-content: flex-start;
  }

  body.module-chat .msg{
    max-width: 86%;
    border-radius: 18px;
    padding: 12px 14px;
    font-size: 15px;
    line-height: 1.45;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }
  body.module-chat .msg.me{
    background: #2563eb;
    color: #fff;
    border-bottom-right-radius: 7px;
  }
  body.module-chat .msg.ai{
    background: #e5e7eb;
    color: #111827;
    border-bottom-left-radius: 7px;
  }

  /* Copy button smaller on mobile */
  body.module-chat .copy-btn{
    display:none;
  }

  /* Composer (bottom bar like ChatGPT) */
  body.module-chat .chat-bar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(17,24,39,.10);
    padding: 10px 12px 12px;
  }

  /* Hide meta controls to reduce clutter; keep them accessible via a small toggle in v6 */
  body.module-chat .composer-meta{
    display:none;
  }
  body.module-chat .chips{
    display:none;
  }

  body.module-chat .composer-row{
    display:flex;
    align-items:flex-end;
    gap: 8px;
  }

  body.module-chat textarea#composer{
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 140px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(17,24,39,.12);
    font-size: 16px; /* iOS zoom prevention */
    line-height: 1.35;
    background:#fff;
  }

  body.module-chat #attachBtn,
  body.module-chat #sendBtn,
  body.module-chat #stopBtn{
    height: 44px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 15px;
  }

  body.module-chat #attachBtn{
    width: 44px;
    padding: 0;
  }

  /* Hide sending banner unless active */
  body.module-chat .chat-sending{
    position: sticky;
    top: 56px;
    margin: 0;
    border-radius: 0;
  }

  /* Ensure global sidebar/hamburger doesn't break: keep it, but it's fine */
}

/* Phone tweaks */
@media (max-width: 480px) {
  body.module-chat .chat-log{ padding-left: 10px; padding-right: 10px; }
  body.module-chat .msg{ max-width: 92%; }
  body.module-chat .chat-mobile-btn{ width: 38px; height: 38px; border-radius: 12px; }
}

/* Fix: prevent desktop-collapsed sidebar strip on phones */
@media (max-width: 1024px){
  body.focus-chat #appShell.is-collapsed{ grid-template-columns: 0 1fr; }
  body.focus-chat #appShell.is-collapsed .sidebar{ width:0; overflow:hidden; }
}