.mobile-drawer-header,
.mobile-chat-menu-toggle {
  display:none;
}

@media (max-width:720px) {
  html,
  body {
    height:100%;
    overflow:hidden;
  }

  .chat-app,
  .chat-app.sidebar-collapsed {
    height:100dvh;
    min-height:100dvh;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    overflow:hidden;
  }

  /* El header desktop deja de existir visualmente en mobile. */
  .app-header {
    display:none!important;
  }

  .chat-view,
  .connections-view,
  .account-view {
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
    min-height:0;
  }

  .chat-view {
    height:100%;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .chat-header {
    position:relative!important;
    top:auto!important;
    min-height:58px!important;
    margin:0!important;
    padding:6px 12px!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    border-bottom:1px solid var(--line);
    background:rgba(255,254,250,.99)!important;
  }

  .mobile-chat-menu-toggle {
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--brand-primary);
    font-size:1.45rem;
    line-height:1;
    cursor:pointer;
  }

  .chat-header .assistant-avatar {
    width:38px!important;
    height:38px!important;
    flex:0 0 38px;
    border-radius:11px!important;
  }

  .chat-header-copy {
    min-width:0;
    flex:1 1 auto;
    gap:1px!important;
  }

  .chat-header-copy strong {
    font-size:.91rem!important;
    line-height:1.18;
  }

  .chat-header-copy span {
    margin:0!important;
    font-size:.68rem!important;
    line-height:1.2;
  }

  .chat-view::before {
    inset:58px 0 0!important;
  }

  .message-stream {
    padding-top:10px!important;
  }

  /* Drawer independiente: no depende de elementos del header desktop. */
  .app-sidebar,
  .sidebar-collapsed .app-sidebar {
    position:fixed!important;
    z-index:110!important;
    inset:0 auto 0 0!important;
    width:min(88vw,360px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    padding:0 16px max(4px,env(safe-area-inset-bottom))!important;
    overflow:hidden!important;
    background:#fffefa!important;
  }

  .app-sidebar::before {
    content:none!important;
    display:none!important;
  }

  .mobile-drawer-header {
    min-height:64px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 -16px 14px;
    padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
    background:var(--brand-primary);
    color:var(--brand-primary-foreground);
    box-shadow:0 2px 12px rgba(20,33,29,.16);
  }

  .mobile-drawer-logo {
    width:36px!important;
    height:36px!important;
    flex:0 0 36px;
    display:grid!important;
    place-items:center;
    padding:0!important;
    overflow:hidden;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  .mobile-drawer-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .mobile-drawer-workspace {
    min-width:0;
    display:grid;
    justify-items:end;
    gap:2px;
    text-align:right;
  }

  .mobile-drawer-workspace small {
    color:rgba(255,255,255,.68);
    font-size:.58rem;
    line-height:1;
  }

  .mobile-drawer-workspace strong {
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#fff;
    font-size:.79rem;
    line-height:1.15;
  }

  .app-sidebar .new-chat-button,
  .sidebar-collapsed .new-chat-button {
    min-height:52px;
    height:auto;
    margin-top:0!important;
    padding:12px!important;
    font-size:inherit!important;
    border-radius:14px;
  }

  .sidebar-collapsed .new-chat-button span,
  .sidebar-collapsed .nav-item span,
  .sidebar-collapsed .account-button strong,
  .sidebar-collapsed .account-chevron {
    display:initial!important;
    font-size:inherit!important;
  }

  .sidebar-collapsed .nav-item {
    justify-content:flex-start!important;
    padding:11px 12px!important;
    font-size:inherit!important;
  }

  .sidebar-collapsed .sidebar-divider,
  .sidebar-collapsed .sidebar-label,
  .sidebar-collapsed .recent-chats {
    display:block!important;
  }

  .recent-chats {
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    padding-bottom:4px;
  }

  .sidebar-bottom {
    flex:0 0 auto;
    margin-top:auto!important;
    padding-top:8px!important;
    padding-bottom:0!important;
  }

  .sidebar-collapsed .account-button {
    justify-content:flex-start!important;
    padding:10px 11px!important;
  }

  /* El shell de conversación debe arrancar en el borde superior real del viewport. */
  html,
  body,
  #dashboard-view.chat-app,
  #dashboard-view.chat-app .chat-view {
    padding-top:0!important;
    margin-top:0!important;
  }

  #dashboard-view.chat-app,
  #dashboard-view.chat-app .chat-view,
  #dashboard-view.chat-app .chat-header {
    top:0!important;
    transform:none!important;
  }
}